<template>
  <div>
    <!-- <textarea v-model="mdVal"></textarea>
    <div style="position: relative;" v-on:mouseenter="handleMouseenter">
			<VueMarkdown class="markdown-body" :source="mdVal"></VueMarkdown>
		</div> -->

    <!-- 750px -->
    <!-- <Log :style="`
        position: fixed;
        width: ${smallPhone ? '65%' : '42%'};
        z-index: 99999999999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
        `
      "></Log> -->

    <Remind v-if="IsShowRemind" @child-showAI="ShowRemind()" :style="`
        position: fixed;
        width: ${smallPhone ? '65%' : '42%'};
        z-index: 99999999999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        `
      "></Remind>


    <Login ref="loginChild" @child-Tips="Tips" v-show="IsShowLoginDiv" @child-ShowLoginDiv="ShowLoginDiv"
      @child-SetChildLoginUserImg="SetChildLoginUserImg" :style="`position: fixed;width: ${smallPhone ? '67%' : '530px'
        };z-index: 999999999;top: 50%;left: 50%;transform: translate(-50%,-50%);`"></Login>

    <Roleplay :IsdarkMode="IsdarkMode" @child-newmsg="NewMsg" @child-Tips="Tips" v-show="IsShowSelectRole" :style="`position: fixed;width: ${smallPhone ? '67%' : '750px'
      };z-index: 999999999;top: 50%;left: 50%;transform: translate(-50%,-50%);`">
    </Roleplay>

    <Prompts v-if="IsShowAIWords" @child-showAI="ShowAIWords()" @child-Tips="Tips('复制成功')" style="
        position: fixed;
        width: 42%;
        z-index: 99999999999;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
      ">
    </Prompts>

    <div v-show="IsShowAtUserDiv" ref="AtthisUser" class="AtthisUser" style="
        display: flex;
        flex-direction: column;
        background-color: #fff;
        position: fixed;
        z-index: 99999999999;
        padding: 10px;
        font-family: KaiTi;
        line-height: 1.5;
        width: 200px;
        border-radius: 5px;
        box-shadow: 0 0 10px 1px #888888;
      ">
      <div style="
          display: flex;
          justify-content: space-between;
          height: 50px;
          align-items: center;
        ">
        <div style="display: flex; flex-direction: column">
          <span style="font-weight: 800; font-size: 18px">{{
            AtUserName
          }}</span>
          <span style="font-size: 14px">地区：{{ AtUserProvice }}</span>
        </div>
        <img :src="AtUserImg" alt="" style="width: 45px; height: 45px; border-radius: 5px" />
      </div>
      <div style="
          margin-top: 8px;
          font-size: 14px;
          display: flex;
          flex-direction: column;
        ">
        <span>活跃次数：{{ AtSendMsgCount }}次</span>
        <span>上一次发言时间：{{ AtUserSendTime }}</span>
        <span>内容：{{ AtSendLastMsg }}</span>
      </div>
      <div style="margin-top: 8px;width: 100%;;display: flex;justify-content: space-between;">
        <button :style="`background-color: #3296fa;
            font-family: KaiTi;
            width: 88px;
            height: 25px;
            border-radius: 5px;
            border: 0;
            ${IsdarkMode ? 'border: 1px solid #454546;' : ''}
            color: #ffffff;
            margin-bottom: 2px;`
          " @click="GotoUser2($event)">
          主页
        </button>
        <button v-show="this.current.uuid == 2" :style="`background-color: #3296fa;
            font-family: KaiTi;
            width: 88px;
            height: 25px;
            border-radius: 5px;
            border: 0;
            ${IsdarkMode ? 'border: 1px solid #454546;' : ''}
            color: #ffffff;
            margin-bottom: 2px;`
          " @click="SendSigUserChat(AtUserName, AtUserImg, AtUseruuid)">
          发消息
        </button>
      </div>
    </div>

    <!-- @框 -->
    <div v-show="IsShowAtOnline" ref="Atonlineusers" class="Atonlineusers" :style="`background-color: #ffffff;
        overflow: hidden;
        padding-bottom: 0;
        border: 1px solid ${IsdarkMode ? '#454546;box-shadow:none' : '#eee'};
        width: 140px;
        height: 175px;
       
        position: fixed;
        z-index: 99999999999999999;
        border-radius: 5px;`
      ">

      <div style="width: 100%;height: calc(100% - 20px);overflow: auto; padding: 6px;box-sizing: border-box;"
        class="Atonlineusers_son">
        <div @click="AtThis(item)" v-for="(item, index) in SelectAtOnlineUserList" :key="index" style="
          display: flex;
          align-items: center;
          margin-bottom: 5px;
          
          padding: 2px;
        " class="Atselect">
          <img :src="item.userimgurl" alt=""
            style="width: 22px; height: 22px; border-radius: 50%;background-color: #fff !important;" />
          <span style="font-size: 13px; margin-left: 3px">{{
            item.username
          }}</span>
        </div>
      </div>
      <input ref="AtonlineusersSearch_Dom" v-model="AtonlineusersSearch_KeyWord" @input="AtonlineusersSearch" type="text"
        :style="`width: 100%;height: 20px;margin: 0;padding: 0;background-color: #dbd9d8;border: 0;font-family: Kaiti ;font-size: 12px;padding-left: 5px;
      outline: none;box-sizing: border-box;${IsdarkMode ? 'border-top: 1px solid #454546;' : ''};`" placeholder="搜索">
    </div>

    <div v-on:mouseenter="IsShowCopy = false" class="layui-card">
      <div class="layui-card-body">
        <div @click.capture="CancelShowInput" class="msgdiv">
          <div class="msgdiv_son"
            :style="`width: 100vw;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  height: 100vh;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    display: flex;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        justify-content: center;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            box-sizing: border-box;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      align-items: ${smallPhone &&
                ReSizeisFirstClick
                ? 'flex-start'
                : 'center'
              };
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                padding-top: ${smallPhone &&
                ReSizeisFirstClick
                ? '1.5vh'
                : '0px'
              };
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        `">
            <div
              :style="`width: ${Basewidth};height: ${Baseheight};border:${smallPhone && !IsShowBaseLeftToolsDiv ? '0' : '0'
                };border-radius:${smallPhone && !ReSizeisFirstClick ? '0' : '10px'};${IsdarkMode ? 'box-shadow: none;border: 1px solid rgb(69, 69, 70);border-radius:10px' : ''}`"
              ref="msgborder" class="msgborder">

              <div v-show="IsShowBaseLeftToolsDiv" ref="msgleft1" class="msgleft1" @mouseover="ShowUserListDiv_LeftOver"
                :style="`${IsdarkMode ? 'border-right: 1px solid rgb(69, 69, 70);' : '0'}`"
                @click="CloseIsSetItemShouAndAbout">
                <div v-show="IsShowUserListDiv_Left" class="msgleft1_tomin" title="展开"
                  @click.stop="IsShowUserListDiv = true">
                  <svg ref="msgleft1_tomin" t="1683810876899" class="msgleft1_tomin_icon" viewBox="0 0 1024 1024"
                    version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2516" width="200" height="200">
                    <path
                      d="M734.838739 833.679373c0 15.954367 13.053294 29.007661 29.007661 29.007661l71.167876 0c15.954367 0 29.007661-13.053294 29.007661-29.007661l0-643.973754c0-15.954367-13.053294-29.007661-29.007661-29.007661l-71.167876 0c-15.954367 0-29.007661 13.053294-29.007661 29.007661L734.838739 833.679373z"
                      fill="#3D3B4F" p-id="2517"></path>
                    <path
                      d="M631.327224 189.704596c0-15.954367-10.468422-21.211091-23.263843-11.682064l-425.215448 316.65187c-12.795421 9.529027-12.795421 25.122167 0 34.650171l425.215448 316.650847c12.795421 9.529027 23.263843 4.272303 23.263843-11.682064L631.327224 189.704596z"
                      fill="#3D3B4F" p-id="2518"></path>
                  </svg>
                </div>

                <div class="setting" style="
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    height: 100%;
                  ">
                  <div class="msgleft1_topSvgBox">
                    <div  class="msgleft3topuser_base">
                      <img class="msgleft3topuserimg" style="border-radius: 5px; margin-top: 15px" :src="LoginUserImg"
                      alt="Alternate Text" @click.stop="MyCenter" />

                      <img v-if="LoginIsVip == 1" class="noStyle" style="width: 18px;height: 18px;position: absolute;bottom: -2px;right: -2px;" src="https://file.xiaoshagua.top/font/20210412060958.png" alt="">
                    </div>
                    

                      

                    <div class="remove" style="
                        width: 100%;
                        display: flex;
                        justify-content: center;
                        margin-top: 18px;
                      ">
                      <svg style="width: 29px; height: 29px" t="1683809807941" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="26524" width="200" height="200">
                        <path
                          d="M331.1 987.979c-8.9 0-17.7-3.4-24.5-10.2-13.5-13.5-13.5-35.5 0-49l123.6-123.6c33.8-33.8 78.8-52.5 126.6-52.5h118c79.2 0 143.7-64.5 143.7-143.7v-228.8c0-79.2-64.5-143.7-143.7-143.7h-461.8c-79.2 0-143.7 64.5-143.7 143.7v228.8c0 79.2 64.5 143.7 143.7 143.7h64.4c19.1 0 34.6 15.5 34.6 34.6s-15.5 34.6-34.6 34.6h-64.4c-117.5 0-213-95.5-213-213v-228.7c0-117.4 95.6-213 213-213h461.8c117.4 0 213 95.5 213 213v228.8c0 117.5-95.5 213-213 213h-118c-29.3 0-56.9 11.4-77.7 32.2l-123.6 123.6c-6.6 6.9-15.5 10.2-24.4 10.2z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`" p-id="26525"></path>
                        <path d="M280.1 508.879m-43.9 0a43.9 43.9 0 1 0 87.8 0 43.9 43.9 0 1 0-87.8 0Z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`" p-id="26526"></path>
                        <path d="M444 508.879m-43.9 0a43.9 43.9 0 1 0 87.8 0 43.9 43.9 0 1 0-87.8 0Z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`" p-id="26527"></path>
                        <path d="M608 508.879m-43.9 0a43.9 43.9 0 1 0 87.8 0 43.9 43.9 0 1 0-87.8 0Z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`" p-id="26528"></path>
                        <path
                          d="M989.5 532.579c-19.1 0-34.6-15.5-34.6-34.6v-137.7c0-140.6-114.4-255-255-255h-264.8c-19.1 0-34.6-15.5-34.6-34.6s15.5-34.6 34.6-34.6h264.7c178.8 0 324.3 145.5 324.3 324.3v137.7c0 19-15.5 34.5-34.6 34.5z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`" p-id="26529"></path>
                      </svg>
                    </div>
                  </div>
                  <div class="msgleft1_bottomSvgBox" style="
                      display: flex;
                      flex-direction: column;
                      justify-content: center;
                      align-items: center;
                    ">
                    <!-- 朋友圈 -->
                    <div class="remove" @click.stop="SwitchContentBox('朋友圈')">
                      <svg style="width: 28px; height: 28px" t="1687880046230" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6648" width="200" height="200">
                        <path
                          d="M177.738667 652.949333A364.074667 364.074667 0 0 0 331.306667 826.517333v-310.826666L192.490667 645.152c-4.298667 4.010667-9.397333 6.613333-14.752 7.808z m-19.989334-62.922666l209.706667-195.562667H170.666667c-0.618667 0-1.237333-0.010667-1.845334-0.053333A362.186667 362.186667 0 0 0 149.333333 512c0 26.784 2.901333 52.906667 8.416 78.026667z m302.08-195.562667a32.064 32.064 0 0 1-5.152 6.186667l-62.112 57.909333c1.76 3.957333 2.730667 8.341333 2.730667 12.949333v79.541334c3.584 1.642667 6.912 3.978667 9.802667 7.008l67.573333 70.848h90.570667l68.298666-72.938667v-95.872l-68.181333-66.826667c-2.773333 0.778667-5.685333 1.194667-8.693333 1.194667h-94.837334zM395.232 855.466667A362.218667 362.218667 0 0 0 512 874.666667c32.768 0 64.522667-4.341333 94.72-12.490667l-211.413333-221.653333V853.333333c0 0.714667-0.032 1.418667-0.074667 2.133334z m275.466667-17.269334a364.266667 364.266667 0 0 0 155.690666-145.28H533.706667l131.946666 138.346667c2.026667 2.133333 3.712 4.469333 5.045334 6.933333z m184.693333-209.216A362.208 362.208 0 0 0 874.666667 512c0-36.661333-5.44-72.053333-15.552-105.408L650.912 628.906667H853.333333c0.693333 0 1.376 0.021333 2.058667 0.064zM197.962667 330.464h301.312l-139.733334-136.938667a31.978667 31.978667 0 0 1-5.898666-7.893333A364.266667 364.266667 0 0 0 197.973333 330.474667z m220.373333-168.917333l213.205333 208.938666v-195.2c0-1.92 0.170667-3.786667 0.490667-5.621333A362.112 362.112 0 0 0 512 149.333333c-32.384 0-63.786667 4.245333-93.653333 12.213334zM695.552 446.613333V487.637333l134.432-143.573333c0.746667-0.8 1.546667-1.557333 2.346667-2.261333a364.373333 364.373333 0 0 0-136.778667-142.666667v247.488zM512 938.666667C276.362667 938.666667 85.333333 747.637333 85.333333 512S276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`" p-id="6649"></path>
                      </svg>
                    </div>

                    <!-- 好友 -->
                    <div class="remove" @click.stop="SwitchContentBox('好友')">
                      <svg :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`" t="1687246072974" class="icon"
                        viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13276" width="200"
                        height="200">
                        <path
                          d="M620.744 538.88c82.737-40.525 140.309-124.786 140.309-222.937 0-137.368-111.715-249.081-249.027-249.081-137.368 0-249.08 111.713-249.08 249.08 0 98.152 57.571 182.413 140.363 222.937-167.979 47.55-291.512 201.858-291.512 384.816 0 18.464 15.032 33.443 33.497 33.443 18.464 0 33.498-14.979 33.498-33.443 0-183.775 149.46-333.344 333.234-333.344 183.776 0 333.235 149.569 333.235 333.344 0 18.464 14.978 33.443 33.443 33.443 18.52 0 33.497-14.979 33.497-33.443 0-182.958-123.532-337.266-291.457-384.816zM329.887 315.942c0-100.439 81.702-182.195 182.14-182.195 100.384 0 182.086 81.756 182.086 182.195 0 100.384-81.703 182.086-182.086 182.086-100.44 0-182.14-81.702-182.14-182.086z"
                          p-id="13277" :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`"></path>
                      </svg>
                    </div>

                    <!-- 关于 -->
                    <div @click.stop="SwitchContentBox('关于')" class="remove" title="关于" style="position: relative">
                      <svg t="1684206466772" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="12198" width="200" height="200">
                        <path
                          d="M491.776 352c12.864 0 52.48-6.144 65.152-18.304a61.056 61.056 0 0 0 18.88-45.504 61.248 61.248 0 0 0-18.88-45.184 62.464 62.464 0 0 0-45.248-18.56 61.312 61.312 0 0 0-44.48 18.304 61.312 61.312 0 0 0-18.688 45.44c0 18.432 6.336 33.664 18.88 45.76 12.608 12.032 11.904 18.048 24.384 18.048zM512 32C246.912 32 32 246.848 32 512s214.912 480 480 480c265.152 0 480-214.848 480-480S777.152 32 512 32z m0 896a416 416 0 1 1 0-832 416 416 0 0 1 0 832z m39.488-278.528l-14.912 14.848 39.744-210.816c0.256-1.408-0.192-2.816-0.128-4.224v-0.64a30.592 30.592 0 0 0-9.408-22.72l-0.256-0.448c-0.192-0.192-0.448-0.192-0.64-0.384a33.28 33.28 0 0 0-12.992-7.424c-1.664-0.512-3.008-1.472-4.8-1.728-1.216-0.192-2.432 0.128-3.712 0.064l-3.136 0.064a34.24 34.24 0 0 0-29.504 17.216L425.472 519.488a33.152 33.152 0 1 0 47.04 46.976l14.848-14.848-39.68 210.816c-0.256 1.472 0.192 2.816 0.128 4.288v0.64a30.272 30.272 0 0 0 9.408 22.72l0.256 0.384 0.64 0.448a35.456 35.456 0 0 0 12.992 7.36c1.6 0.512 2.944 1.408 4.736 1.728 1.28 0.192 2.496-0.192 3.776-0.064l3.136-0.128a34.048 34.048 0 0 0 29.504-17.152l86.272-86.272a33.152 33.152 0 1 0-47.04-46.912z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`" p-id="12199"></path>
                      </svg>
                      <div style="
                          background-color: #fa5151;
                          width: 8px;
                          height: 8px;
                          border-radius: 50%;
                          position: absolute;
                          right: 0px;
                          bottom: 5px;
                        "></div>
                    </div>

                    <div @click="ClearCacheAll" class="remove" title="清空全部缓存">
                      <svg t="1682644622987" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5901" width="128" height="128">
                        <path
                          d="M975.36 489.984c0.512-53.248-42.496-96.768-95.744-97.28h-227.84V200.192c0.512-65.536-52.736-119.296-118.272-119.808H501.76c-65.536 0.512-118.784 54.272-118.272 119.808v192.512H151.04c-53.76 0.512-96.256 44.544-95.744 98.304 0.512 41.984 28.16 78.848 68.096 91.648v339.456c-0.512 43.008 34.304 77.824 77.312 78.336h635.392c43.008-0.512 77.312-35.328 77.312-78.336v-341.504c37.376-14.336 61.952-50.688 61.952-90.624z m-532.48-289.792c0-32.768 26.112-59.392 58.88-59.392h31.744c32.768 0.512 58.88 27.136 58.88 59.392v192.512H442.88V200.192z m393.216 739.84h-97.792v-123.392c0.512-16.384-12.288-30.208-28.672-30.72-16.384-0.512-30.208 12.288-30.72 28.672v125.44h-130.56v-123.392c0-16.384-13.312-29.696-29.696-29.696-16.384 0-29.696 13.312-29.696 29.696v123.392H358.4v-123.392c0-16.384-13.312-29.696-29.696-29.696-16.384 0-29.696 13.312-29.696 29.696v123.392H200.704c-9.728 0-17.92-8.192-17.92-17.92v-334.848h671.232v334.848c0 9.728-8.192 17.92-17.92 17.92z m43.52-413.184H151.04c-20.48 0-36.864-16.896-36.864-37.376s16.384-36.864 36.864-36.864h728.576c20.48 0 36.864 16.896 36.864 37.376s-16.384 36.864-36.864 36.864z"
                          p-id="5902" :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`"></path>
                      </svg>
                    </div>

                    <div class="set" title="设置" @click.stop="SwitchContentBox('设置')">
                      <svg t="1682497838228" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="2668" width="200" height="200">
                        <path
                          d="M512 328c-100.8 0-184 83.2-184 184S411.2 696 512 696 696 612.8 696 512 612.8 328 512 328z m0 320c-75.2 0-136-60.8-136-136s60.8-136 136-136 136 60.8 136 136-60.8 136-136 136z"
                          p-id="2669" :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`"></path>
                        <path
                          d="M857.6 572.8c-20.8-12.8-33.6-35.2-33.6-60.8s12.8-46.4 33.6-60.8c14.4-9.6 20.8-27.2 16-44.8-8-27.2-19.2-52.8-32-76.8-8-14.4-25.6-24-43.2-19.2-24 4.8-48-1.6-65.6-19.2-17.6-17.6-24-41.6-19.2-65.6 3.2-16-4.8-33.6-19.2-43.2-24-14.4-51.2-24-76.8-32-16-4.8-35.2 1.6-44.8 16-12.8 20.8-35.2 33.6-60.8 33.6s-46.4-12.8-60.8-33.6c-9.6-14.4-27.2-20.8-44.8-16-27.2 8-52.8 19.2-76.8 32-14.4 8-24 25.6-19.2 43.2 4.8 24-1.6 49.6-19.2 65.6-17.6 17.6-41.6 24-65.6 19.2-16-3.2-33.6 4.8-43.2 19.2-14.4 24-24 51.2-32 76.8-4.8 16 1.6 35.2 16 44.8 20.8 12.8 33.6 35.2 33.6 60.8s-12.8 46.4-33.6 60.8c-14.4 9.6-20.8 27.2-16 44.8 8 27.2 19.2 52.8 32 76.8 8 14.4 25.6 22.4 43.2 19.2 24-4.8 49.6 1.6 65.6 19.2 17.6 17.6 24 41.6 19.2 65.6-3.2 16 4.8 33.6 19.2 43.2 24 14.4 51.2 24 76.8 32 16 4.8 35.2-1.6 44.8-16 12.8-20.8 35.2-33.6 60.8-33.6s46.4 12.8 60.8 33.6c8 11.2 20.8 17.6 33.6 17.6 3.2 0 8 0 11.2-1.6 27.2-8 52.8-19.2 76.8-32 14.4-8 24-25.6 19.2-43.2-4.8-24 1.6-49.6 19.2-65.6 17.6-17.6 41.6-24 65.6-19.2 16 3.2 33.6-4.8 43.2-19.2 14.4-24 24-51.2 32-76.8 4.8-17.6-1.6-35.2-16-44.8z m-56 92.8c-38.4-6.4-76.8 6.4-104 33.6-27.2 27.2-40 65.6-33.6 104-17.6 9.6-36.8 17.6-56 24-22.4-30.4-57.6-49.6-97.6-49.6-38.4 0-73.6 17.6-97.6 49.6-19.2-6.4-38.4-14.4-56-24 6.4-38.4-6.4-76.8-33.6-104-27.2-27.2-65.6-40-104-33.6-9.6-17.6-17.6-36.8-24-56 30.4-22.4 49.6-57.6 49.6-97.6 0-38.4-17.6-73.6-49.6-97.6 6.4-19.2 14.4-38.4 24-56 38.4 6.4 76.8-6.4 104-33.6 27.2-27.2 40-65.6 33.6-104 17.6-9.6 36.8-17.6 56-24 22.4 30.4 57.6 49.6 97.6 49.6 38.4 0 73.6-17.6 97.6-49.6 19.2 6.4 38.4 14.4 56 24-6.4 38.4 6.4 76.8 33.6 104 27.2 27.2 65.6 40 104 33.6 9.6 17.6 17.6 36.8 24 56-30.4 22.4-49.6 57.6-49.6 97.6 0 38.4 17.6 73.6 49.6 97.6-6.4 19.2-14.4 38.4-24 56z"
                          p-id="2670" :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#ffffff'}`"></path>
                      </svg>
                    </div>
                  </div>
                </div>
              </div>
              <transition name="slide">
                <div v-show="IsShowUserListDiv" class="msgleft2" @click="CloseIsSetItemShouAndAbout"
                  :style="`${smallPhone && IsShowUserListDiv
                    ? 'flex-grow: 1;width:0px;'
                    : 'width:265px;'};${IsdarkMode ? 'border: 1px solid rgb(69, 69, 70);border-top: 0;border-bottom: 0;border-left: 0' : '0'}`" @mouseover="ShowUserListDiv_RightOver">
                  <div v-show="IsShowUserListDiv_Right" class="tomin" title="收缩" @click.stop="IsShowUserListDiv = false">
                    <svg ref="tomin" t="1683810876899" class="tomin_icon" viewBox="0 0 1024 1024" version="1.1"
                      xmlns="http://www.w3.org/2000/svg" p-id="2516" width="200" height="200">
                      <path
                        d="M734.838739 833.679373c0 15.954367 13.053294 29.007661 29.007661 29.007661l71.167876 0c15.954367 0 29.007661-13.053294 29.007661-29.007661l0-643.973754c0-15.954367-13.053294-29.007661-29.007661-29.007661l-71.167876 0c-15.954367 0-29.007661 13.053294-29.007661 29.007661L734.838739 833.679373z"
                        fill="#3D3B4F" p-id="2517"></path>
                      <path
                        d="M631.327224 189.704596c0-15.954367-10.468422-21.211091-23.263843-11.682064l-425.215448 316.65187c-12.795421 9.529027-12.795421 25.122167 0 34.650171l425.215448 316.650847c12.795421 9.529027 23.263843 4.272303 23.263843-11.682064L631.327224 189.704596z"
                        fill="#3D3B4F" p-id="2518"></path>
                    </svg>
                  </div>
                  <div class="msgleft2_top">
                    <input class="msgleft2_top_search" :style="`
                        font-size: 10px;
                        padding-left: 8px;
                        font-family: 'KaiTi';${IsdarkMode ? 'border:1px solid rgb(69, 69, 70)' : ''}`
                      " type="text" placeholder="搜索.." value="" />
                    <button v-show="!IsdarkMode">+</button>
                  </div>
                  <ul id="userlist">
                    <!-- <li @mouseover="usercolseactiveIndex = index" @mouseleave="usercolseactiveIndex = -1"
                      @click.stop="currentitem(item, index)" class="msgusertree" v-for="(item, index) in Userlist"
                      :key="item.uuid" :class="{ clickbgc: index === activeIndex }"> -->

                    <li @mouseover="usercolseactiveIndex = index" @mouseleave="usercolseactiveIndex = -1"
                      @click.stop="currentitem(item, index)" class="msgusertree" v-for="(item, index) in Userlist"
                      :key="item.uuid" :style="`${IsdarkMode && index === activeIndex ? 'border:1px solid rgb(69, 69, 70);border-right: 0;border-left: 0;' :
                        !IsdarkMode && index === activeIndex ? 'background-color: #c3c4c6;' : ''}`">



                      <!-- <div v-if="item.uuid == 2
                        && OldMsgLenght != Msglist.filter(r => r.uuid == 2).length
                      "
                        style="background-color: #fa5151; width: 10px; height: 10px; border-radius: 50%; position: absolute; left: 5px; top:4px;z-index: 999999999;
                                                                                                                                    font-size: 12px;font-family: Kaiti;display: flex;align-items: center;justify-content: center;color: #FFFFFF;">

                      </div> -->
                      <div v-show="!item.IsAI && !item.isRead" style="
                          background-color: #fa5151 !important;
                          width: 10px;
                          height: 10px;
                          border-radius: 50%;
                          position: absolute;
                          left: 5px;
                          top: 4px;
                          z-index: 999999999;
                          font-size: 12px;
                          font-family: Kaiti;
                          display: flex;
                          align-items: center;
                          justify-content: center;
                          color: #ffffff;
                        "></div>

                      <img v-if="item.Iscommon" style="border-radius: 5px" class="userimg" :src="SetAIImgUrl"
                        alt="Alternate Text" />
                      <div v-else class="userimg" v-html="item.imghtml"></div>

                      <div class="user">
                        <span class="username_Time">
                          <span style="
                              font-size: 16px;
                              max-width: 120px;
                              white-space: nowrap;
                              overflow: hidden;
                              text-overflow: ellipsis;
                            ">
                            <span style="
                                margin-right: 4px;
                                font-family: KaiTi;
                                color: white;
                                font-size: 15px;
                                padding: 1px 3px;
                                border-radius: 4px;
                                background-color: rgb(84, 125, 246);
                              " v-show="item.uuid == 2">群组</span>{{ item.currentName }}
                          </span>
                          <span style="font-size: 12px; color: #5a5a5a">{{
                           formatTime(item.lastTime)
                          }}</span>
                        </span>

                       
                        <span class="usercontent_chat">
                          <span>{{
                           item.msgCount
                          }}条对话</span>


                          <span v-show="!item.IsAI" style="display: flex; align-items: center" class="lastMsg">
                            <span class="atlastmsg" style="
                                max-width: 130px;
                                white-space: nowrap;
                                overflow: hidden;
                                text-overflow: ellipsis;
                                display: flex;
                                align-items: center;
                              " v-html="item.lastMsg">
                            </span>
                          </span>
                        </span>
                      </div>
                      <div title="关闭当前对话" @click="SigUserColse(item)" class="colse noStyle"
                        v-show="usercolseactiveIndex == index && item.uuid != 2">
                        <svg t="1682648595539" class="icon noStyle" viewBox="0 0 1024 1024" version="1.1"
                          xmlns="http://www.w3.org/2000/svg" p-id="10509" width="200" height="200">
                          <path
                            d="M85.333333 512C85.333333 276.352 276.309333 85.333333 512 85.333333c235.648 0 426.666667 190.976 426.666667 426.666667 0 235.648-190.976 426.666667-426.666667 426.666667-235.648 0-426.666667-190.976-426.666667-426.666667z m426.666667-30.165333l-105.685333-105.706667a21.269333 21.269333 0 0 0-30.08 0.106667 21.205333 21.205333 0 0 0-0.106667 30.08L481.834667 512l-105.706667 105.685333a21.269333 21.269333 0 0 0 0.106667 30.08 21.205333 21.205333 0 0 0 30.08 0.106667L512 542.165333l105.685333 105.706667a21.269333 21.269333 0 0 0 30.08-0.106667 21.205333 21.205333 0 0 0 0.106667-30.08L542.165333 512l105.706667-105.685333a21.269333 21.269333 0 0 0-0.106667-30.08 21.205333 21.205333 0 0 0-30.08-0.106667L512 481.834667z"
                            fill="#8a8a8a" p-id="10510"></path>
                        </svg>
                      </div>
                    </li>
                  </ul>
                  <div class="msgleft2_bottom">
                    <div @click="IsShowSelectRole = true" class="newmsg"
                      :style="`border:${IsdarkMode ? `1px solid ${this.SelectMycolor};` : '0px'}`">
                      <svg t="1682498483156" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3677" width="200" height="200">
                        <path
                          d="M513.796267 940.398933c-109.213867 0-218.427733-41.634133-301.696-124.9024-166.237867-166.237867-166.237867-437.162667 0-603.396266 166.2336-166.237867 437.162667-166.237867 603.396266 0 166.237867 166.2336 166.237867 437.162667 0 603.396266-83.268267 83.268267-192.482133 124.9024-301.696 124.9024z m-256.443734-170.154666c141.499733 141.495467 371.392 141.495467 512.887467 0 141.499733-141.499733 141.499733-371.392 0-512.891734-141.495467-141.495467-371.387733-141.495467-512.887467 0-141.495467 141.499733-141.495467 371.392 0 512.887467z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#606060'}`" p-id="3678"></path>
                        <path
                          d="M545.476267 543.6672v126.109867c0 23.530667-10.56 42.538667-34.090667 42.538666s-29.866667-19.008-29.866667-42.538666v-126.109867h-127.317333c-23.534933 0-42.538667-6.336-42.538667-29.866667s19.003733-34.094933 42.538667-34.094933h127.317333V354.197333c0-23.530667 6.331733-42.538667 29.866667-42.538666s34.090667 19.008 34.090667 42.538666v125.508267h129.1264c23.534933 0 42.538667 10.56 42.538666 34.090667s-19.003733 29.866667-42.538666 29.866666h-129.1264z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#606060'}`" p-id="3679"></path>
                      </svg>
                      <span>新的对话</span>
                    </div>
                  </div>
                </div>
              </transition>

              <!-- 1  聊天-->
              <div v-show="!(smallPhone && IsShowUserListDiv)" class="msgleft3" v-if="!IsSetItemShou &&
                !IsAbout &&
                !IsShowFriend &&
                !IsShowJournalBox &&
                !IsShowMy
                " @mouseover="ShowUserListDiv_Left()">
                <TopBar @child-ShowAIWords="ShowAIWords" @child-editcurrentNameClick="editcurrentNameClick"
                  @child-Resize="Resize" @child-editcurrentNameevent="inputhandleChange"
                  @child-openJournal="SwitchContentBox('朋友圈不刷新')" :SelectMycolor="SelectMycolor" :smallPhone="smallPhone"
                  :parentisshowEdit="isshowEdit" :current="current" :ReqMessagesCount="ReqMessages.filter(
                    (r) => r.uuid == current.uuid && r.isshow == true
                  ).length
                    " :OnlineCount="OnlineCount" :IsdarkMode="IsdarkMode">
                </TopBar>
                <!-- {{ current.uuid }} -->
                <div 
                  :style="`flex:${smallPhone ? '1' : '75%'};${IsdarkMode ? 'border-bottom: 1px solid #484c4e;' : 'border-bottom: 1px solid #e6e5e5;'}`"
                  class="msgleft3msgcontent_base" @mousewheel="handleMouseWheel" ref="msgleft3msgcontent_base">

                 
                  <div v-show="MsgListBoxscrollTop == 0" class="spinner"></div>

                  <div @scroll="Msg_scrollIsMoveIsRead"  @wheel="MsgListscrollIsMove" class="msgleft3msgcontent" ref="msgleft3msgcontent" style="height: 100%;overflow: auto;">
                    
                    

                    <div   v-for="(item, index) in MsgDDLlist(current.uuid)" :key="index">
                      <!-- {{ current }} -->
                       
                      <div :ref="item.msgid" :id="item.msgid" :data-useruuid="item.senduuid" class="positionmsg" v-if="!item.ismy">
                        <div v-show="item.timeDiff" style="
                          text-align: center;
                          font-size: 12px;
                          font-family: KaiTi;
                          color: #aaa;
                          margin: 10px 0;
                        ">
                          {{ item.timeStr }}
                        </div>

                        <!-- 判断是否为聊天室 -->
                        <div class="msgleft3msgcontentZong" style="justify-content: flex-start">
                          <!-- <img @click="AtThisUser" :data-username="item.sendName" :data-provice="item.tag"  :data-userimg="item.imgUrl" v-if="
                          current.uuid == 2 &&
                          item.tag != '系统' &&
                          item.tag != 'AI助手'
                        " style="border-radius: 5px" class="msgleft3topuserimg" :src="item.imgUrl"
                          alt="Alternate Text" /> -->

                          <div @click="clickThisUser" :data-msgid="item.msgid" :data-useruuid="item.senduuid"
                            :data-username="item.sendName" :data-userimg="item.imgUrl" :data-provice="item.tag">
                            <img v-if="current.Iscommon" style="border-radius: 5px" class="msgleft3topuserimg"
                              :src="SetAIImgUrl" alt="Alternate Text" />
                            <div v-else-if="!current.Iscommon && current.IsAI" class="msgleft3topuserimg"
                              v-html="current.srchtml">
                            </div>
                            <div v-else style="border-radius: 5px" class="msgleft3topuserimg" v-html="`<img style='width: 100%;height: 100%;background-color: #fff !important;' src='${item.imgUrl}'/>`
                              "></div>
                          </div>
                          <!-- 颜色 40d2b2  ce9c49 #547df6-->
                          <!-- <div style="flex: 1" v-if="current.uuid == 2"> -->
                          <div style="width: calc(100% - 40px);" v-if="current.uuid == 2">
                            <div style="display: flex; align-items: center">
                               
                              <span :style="`margin-left:${smallPhone ? '11px' : '16px'
                                };font-family: KaiTi;color: white;font-size: 13px;padding: 1px 3px;border-radius: 4px;
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          background-color: ${item.tag ==
                                  '系统' || item.sendName == 'Doubt'
                                  ? '#547df6'
                                  : item.tag ==
                                    'AI助手'
                                    ? '#ce9c49'
                                    : '#40d2b2'
                                } !important;color:${IsdarkMode ? '#1e1e1e' : '#ffffff'}!important;`"> 
                                {{ item.sendName == 'Doubt' ? '管理员' : item.tag }}
                              </span>
                              <img v-show="item.isvip == 1"
                              title="vip高级用户，尊享各种权益" class="noStyle" style="width: 18px;height: 18px;margin-left: 2px;margin-right: 1px;" src="https://file.xiaoshagua.top/font/20210412060958.png" alt="">
                              <span class="at_thisUsername" @click="DoubleclickThisUser(item)" style="
                                margin-left: 2px;
                                font-family: KaiTi;
                                color: slategray;
                                font-size: 13px;
                              ">{{ item.provice }}</span>
                            </div>
                            <div @mouseleave="relevancemsgsIndex = -1" style="margin-top: 5px;position: relative;">

                              <div class="relevanceThisMsg" @click="RelevanceThisMsg(item)"
                                v-show="relevancemsgsIndex == index"
                                :style="`${IsdarkMode ? 'border:1px solid #454546' : 'background-color: #e8e8e8;color:#797979'};
                                                                                                                                                              padding:2px;border-radius: 4px;position: absolute;font-size: 12px;
                                                                                                                                                              ;top: 0px;left:${relevancemsgsLength + 25}px;`">
                                引用</div>

                              <span @mouseenter="ThisMsgConten($event, index)"
                                :style="`margin-left:${smallPhone ? '11px' : '16px'
                                  };max-width:${smallPhone ? 'calc(100% - 62px);' : '70%;'
                                  }border:${IsdarkMode ? '1px solid #454546' : '0'};${isSingleImgHTML(item.msg) ? 'padding-left:0;padding-right:0;' : ''}`"
                                class="msgleft3msgcontentthismsg">


                                <div class="markdown-body">
                                  <VueMarkdown :source="item.msg"> </VueMarkdown>
                                </div>
                              </span>
                            </div>
                            <div v-show="item.hasOwnProperty('relevancemsgs') && item.relevancemsgs != ''" :style="`display: flex;margin-left:${smallPhone ? '11px' : '16px'
                              };max-width:${smallPhone ? 'calc(100% - 62px);' : '70%;'
                              }${isSingleImgHTML(item.msg) ? 'padding-left:0;padding-right:0;' : ''}`">

                              <div class="relevanceSendmsgs"
                                :style="`${IsdarkMode ? 'border:1px solid #454546' : 'background-color: #e8e8e8;color:#797979'};margin-top: 5px;
                                                                                                                                                                ${isSingleImgHTML(item.relevancemsgs) ? 'padding:0px;' : 'padding:4px;'};border-radius: 5px;font-size: 12px;`"
                                v-html="item.relevancesenduser + '：' + item.relevancemsgs">
                              </div>
                            </div>
                          </div>

                          <!-- <div v-else style="flex: 1"> -->
                          <div v-else @mouseleave="relevancemsgsIndex = -1"
                            style="width: calc(100% - 40px);display: flex;flex-direction: column;">

                            <div class="relevanceThisMsg" @click="RelevanceThisMsg(item)"
                              v-show="relevancemsgsIndex == index"
                              :style="`${IsdarkMode ? 'border:1px solid #454546' : 'background-color: #e8e8e8;color:#797979'};
                                                                                                                                                      padding:2px;border-radius: 4px;position: absolute;font-size: 12px;
                                                                                                                                                      ;top: 8px;left:${relevancemsgsLength + 25 + 49}px;`">
                              引用
                            </div>

                            <div>
                              <span
                                :style="`left:${smallPhone ? '59px' : '62px'};${IsdarkMode ? 'border:1px solid #454546;top: 20px;' : ''};`"
                                class="jianjian"></span>
                              <span @mouseenter="ThisMsgConten($event, index)"
                                :style="`margin-left:${smallPhone ? '11px' : '16px'
                                  };max-width:${smallPhone ? 'calc(100% - 62px);' : '70%;'};${IsdarkMode ? 'border:1px solid #454546;' : ''};${isSingleImgHTML(item.msg) ? 'padding-left:0;padding-right:0;' : ''}`"
                                class="msgleft3msgcontentthismsg">
                                <div class="markdown-body">
                                  <VueMarkdown :source="item.msg"> </VueMarkdown>
                                </div>
                              </span>
                            </div>

                            <div v-show="item.hasOwnProperty('relevancemsgs') && item.relevancemsgs != ''" :style="`display: flex;margin-left:${smallPhone ? '11px' : '16px'
                              };max-width:${smallPhone ? 'calc(100% - 62px);' : '70%;'
                              }${isSingleImgHTML(item.msg) ? 'padding-left:0;padding-right:0;' : ''}`">
                              <div class="relevanceSendmsgs"
                                :style="`${IsdarkMode ? 'border:1px solid #454546' : 'background-color: #e8e8e8;color:#797979'};margin-top: 5px;
                                                                                                                                                              ${isSingleImgHTML(item.relevancemsgs) ? 'padding:0px;' : 'padding:4px;'};border-radius: 5px;font-size: 12px;`"
                                v-html="item.relevancesenduser + '：' + item.relevancemsgs">
                              </div>
                            </div>

                          </div>



                        </div>
                      </div>

                      <div :ref="item.msgid" :data-useruuid="item.senduuid" :id="item.msgid" v-else class="positionmsg">
                        <!-- 时间 -->
                        <div v-show="item.timeDiff" style="
                          text-align: center;
                          font-size: 12px;
                          font-family: KaiTi;
                          color: #aaa;
                          margin: 10px 0;
                        ">
                          {{ item.timeStr }}
                        </div>

                        <div class="msgleft3msgcontentZong" style="justify-content: flex-end">

                          <!-- <div style="flex: 1;display: flex;justify-content: flex-end"> -->
                          <div
                            style="width: calc(100% - 40px);display: flex;justify-content: flex-end;flex-direction: column;">

                            <div style="display: flex;justify-content: flex-end;">
                              <span
                                :style="`margin-right:${smallPhone ? '11px' : '16px'
                                  };max-width:${smallPhone ? 'calc(100% - 62px);' : '70%;'}border:${IsdarkMode ? '1px solid #454546' : '0'};${isSingleImgHTML(item.msg) ? 'padding-left:0;padding-right:0;' : ''}`"
                                class="msgleft3msgcontentthismsg_ThisRmsg">
                                <div class="markdown-body">
                                  <VueMarkdown :source="item.msg"></VueMarkdown>
                                </div>
                              </span>
                              <span
                                :style="`right:${smallPhone ? '59px' : '62px'};border:${IsdarkMode ? '1px solid #454546;top: 20px;' : '0'};`"
                                class="jianjianthis"></span>
                            </div>
                            <div v-show="item.hasOwnProperty('relevancemsgs') && item.relevancemsgs != ''"
                              style="display: flex;justify-content: flex-end;">

                              <div :style="`display: flex;margin-right:${smallPhone ? '11px' : '16px'
                                };max-width:${smallPhone ? 'calc(100% - 62px);' : '70%;'
                                }${isSingleImgHTML(item.msg) ? 'padding-left:0;padding-right:0;' : ''}`">
                                <div v-show="item.hasOwnProperty('relevancemsgs') && item.relevancemsgs != ''"
                                  class="relevanceSendmsgs"
                                  :style="`${IsdarkMode ? 'border:1px solid #454546' : 'background-color: #e8e8e8;color:#797979'};margin-top: 5px;
                                                                                                                                                                      ${isSingleImgHTML(item.relevancemsgs) ? 'padding:0px;' : 'padding:4px;'};border-radius: 5px;font-size: 12px;`"
                                  v-html="item.relevancesenduser + '：' + item.relevancemsgs">
                                </div>
                              </div>
                            </div>

                            <div  v-show="!current.IsAI" v-if="current.uuid == 2">


                              <!-- <div  v-if="item.isreadthismsg" class="yidu" :style="`${IsdarkMode ?'color: #8c8484 !important;':'color: #b7bcc2 !important;'}`">
                                 1人已读
                              </div> -->
                              <div   style="position: relative;"  class="yidu" >
                                 
                                <span @mouseenter="This_QunReadUserList_Index = item.msgid" v-if="item.readqunuserlist.length>0" :style="`${IsdarkMode ?'color: #8c8484 !important;':'color: #b7bcc2 !important;'}`">{{item.readqunuserlist.length}}人已读</span>
                                <span @mouseenter="This_QunReadUserList_Index = item.msgid" v-else :style="`${IsdarkMode ?'color: #0e5ebd !important;':'color: #0e5ebd !important;'}`">{{SelectAtOnlineUserList.length - 2}}人未读</span>
 
                                <div  v-show="This_QunReadUserList_Index == item.msgid"   class="Atonlineusers qun_isreaduserlist" :style="`background-color: #ffffff;
                                      overflow: hidden;
                                      padding-bottom: 0;
                                      border: 1px solid ${IsdarkMode ? '#454546;box-shadow:none' : '#eee'};
                                      overflow-y: auto;
                                      width: 120px;
                                      max-height: 180px;
                                      z-index: 99999999999999999999999999999;
                                      border-radius: 5px;`
                                    ">

                                    <div style="width: 100%;height: calc(100% - 20px);overflow: auto; padding: 6px;box-sizing: border-box;"
                                      class="Atonlineusers_son">
                                      <div :style="`font-size: 12px;margin-bottom: 3px;; margin-left: 3px;color:${IsdarkMode ?'var(--global-color)':'#000000'}!important;`">
                                        {{ item.readqunuserlist.length>0 ?'已读列表':'未读列表' }}</div>
                                      <div @click="AtThis(item)" v-for="(item, index) in (item.readqunuserlist.length > 0?
                                      item.readqunuserlist:SelectAtOnlineUserList.filter(r=>r.useruuid != 2 && r.useruuid != -999))" :key="index" style="
                                        display: flex;
                                        align-items: center;
                                        margin-bottom: 5px;
                                        
                                        padding: 2px;
                                      " class="Atselect">
                                        <img :src="item.userimgurl" alt=""
                                          style="width: 20px; height: 20px; border-radius: 50%;background-color: #fff !important;" />
                                        <span :style="`font-size: 12px; margin-left: 3px;color:${IsdarkMode ?'var(--global-color)':'#000000'}!important;`">{{
                                          item.username
                                        }}</span>
                                      </div>
                                    </div>
                                    
                                  </div>


                               </div>

                            </div>
                            <div v-show="!current.IsAI" v-else>
                                <div v-if="item.isreadthismsg" class="yidu" :style="`${IsdarkMode ?'color: #8c8484 !important;':'color: #b7bcc2 !important;'}`">
                                 已读
                              </div>
                               <div v-else class="yidu" :style="`${IsdarkMode ?'color: #0e5ebd !important;':'color: #0e5ebd !important;'}`">
                                未读
                               </div>
                            </div>

                          </div>

                          <img style="border-radius: 5px" class="msgleft3topuserimg" :src="LoginUserImg"
                            alt="Alternate Text" />
                        </div>
                      </div>
                    </div>
                  </div>

                  <div v-show="IsShowbiaoqingDiv">
                    <div class="biaoqingcontentjiantou"></div>
                    <div class="biaoqingcontent" :style="`width:${smallPhone ? '90%' : '55%'};`">
                      <div class="gETXElOH">
                        <img :src="item" class="dy_emoji" alt="" v-for="(item, index) in BiaoQingimages" :key="index"
                          @click="Addemoji(item)" />
                      </div>
                    </div>
                  </div>

                  <div class="relevanceSendmsgs" v-show="relevanceSendmsgs != ''"
                    :style="`position: absolute;bottom:5px;left:5px;z-index:2147483640;display: flex;max-width:${smallPhone ? 'calc(100% - 62px);' : '70%;'}`">

                    <div :style="`${IsdarkMode ? 'border:1px solid #454546' : 'background-color: #e8e8e8;color:#797979'};margin-top: 5px;
                              padding:4px;border-radius: 5px;font-size: 12px;`"
                      v-html="relevanceSendUser + '：' + relevanceSendmsgs">

                    </div>


                    <div title="删除引用" class="removeRelevanceMsg" @click="RemoveRelevanceMsg" style="margin-left: 2px;">
                      <svg style="width: 15px;height: 15px;" t="1682648595539" class="icon" viewBox="0 0 1024 1024"
                        version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10509" width="200" height="200">
                        <path
                          d="M85.333333 512C85.333333 276.352 276.309333 85.333333 512 85.333333c235.648 0 426.666667 190.976 426.666667 426.666667 0 235.648-190.976 426.666667-426.666667 426.666667-235.648 0-426.666667-190.976-426.666667-426.666667z m426.666667-30.165333l-105.685333-105.706667a21.269333 21.269333 0 0 0-30.08 0.106667 21.205333 21.205333 0 0 0-0.106667 30.08L481.834667 512l-105.706667 105.685333a21.269333 21.269333 0 0 0 0.106667 30.08 21.205333 21.205333 0 0 0 30.08 0.106667L512 542.165333l105.685333 105.706667a21.269333 21.269333 0 0 0 30.08-0.106667 21.205333 21.205333 0 0 0 0.106667-30.08L542.165333 512l105.706667-105.685333a21.269333 21.269333 0 0 0-0.106667-30.08 21.205333 21.205333 0 0 0-30.08-0.106667L512 481.834667z"
                          fill="#8a8a8a" p-id="10510"></path>
                      </svg>
                    </div>


                  </div>


                  <div v-show="AtMiMsg != '' && this.current.uuid == 2" @click="GoToAtMiMsg()" class="AtMiMsg" style="position: absolute;bottom: 6px;right: 6px;padding: 2px 4px;
                  border: 1px solid #e02727 !important;color: #e02727 !important;
                  font-size: 12px;border-radius: 3px;z-index: 99999999999999;">
                    {{ AtMiMsg }}(点击定位)↑
                  </div>

                </div>

                <div class="msgleft3botton" :style="`${smallPhone ? 'flex: none;height:102px' : 'flex:20%'
                  };`">
                  <div style="width: 100%;height: 36px;position: relative;">
                    <div class="biaoqing" @click="IsShowbiaoqingDiv = !IsShowbiaoqingDiv">
                      <svg t="1686644432890" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4446" width="128" height="128">
                        <path
                          d="M512 135.529412A376.470588 376.470588 0 1 0 888.470588 512 376.872157 376.872157 0 0 0 512 135.529412z m0 722.823529A346.352941 346.352941 0 1 1 858.352941 512 346.75451 346.75451 0 0 1 512 858.352941z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#5a5a5a'}`" p-id="4447"></path>
                        <path
                          d="M378.478431 449.355294m-35.137255 0a35.137255 35.137255 0 1 0 70.27451 0 35.137255 35.137255 0 1 0-70.27451 0Z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#5a5a5a'}`" p-id="4448"></path>
                        <path
                          d="M645.521569 449.355294m-35.137255 0a35.137255 35.137255 0 1 0 70.27451 0 35.137255 35.137255 0 1 0-70.27451 0Z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#5a5a5a'}`" p-id="4449"></path>
                        <path
                          d="M657.367843 582.27451H366.632157a15.058824 15.058824 0 0 0-14.456471 18.873725 164.843922 164.843922 0 0 0 319.648628 0 15.058824 15.058824 0 0 0-14.456471-18.873725z m-145.367843 112.238431a135.328627 135.328627 0 0 1-124.486275-82.923921h248.97255a135.328627 135.328627 0 0 1-124.486275 82.923921z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#5a5a5a'}`" p-id="4450"></path>
                      </svg>
                    </div>

                    <div class="biaoqing" @click="SendFile()">
                      <input ref="inputfile" type="file" accept="image/*" @change="handleFileChange" name="" id="fi"
                        value="" style="display: none" />
                      <svg :style="`width: 27px; height: 27px; fill: ${IsdarkMode ? `${this.SelectMycolor}` : '#5a5a5a'}`"
                        t="1686730916669" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="4516" width="200" height="200">
                        <path d="M835.3 250.9v522.3H188.7V250.9h646.6m49.8-49.8H138.9v621.8H885V201.1h0.1z" p-id="4517">
                        </path>
                        <path
                          d="M138.9 101.6v99.5H64.3v49.8H188.7V101.6zM885.1 922.4v-99.5h74.6v-49.8H835.3v149.3zM511 705.4H297.5c-7.8 0-20.4-2.9-23.3-7.8-2.9-4.9 1.9-16.5 5.8-23.3 26.2-39.8 53.4-79.6 79.6-119.4 8.7-12.6 17.5-13.6 31.1-7.8 44.6 21.4 90.3 42.7 135.9 64.1 12.6 5.8 28.1 1.9 35.9-9.7 24.3-37.9 49.5-74.7 75.7-111.6 4.9-6.8 13.6-17.5 20.4-17.5 7.8 0 13.6 12.6 16.5 20.4 24.3 60.2 47.6 121.3 70.9 181.5 9.7 25.2 5.8 31.1-23.3 31.1H511z m-78.6-298c0 29.1-25.2 52.4-54.4 51.4-29.1-1-51.4-23.3-51.4-51.4 0-29.1 24.3-52.4 54.4-51.4 27.1 0.9 51.4 24.2 51.4 51.4z"
                          p-id="4518"></path>
                      </svg>
                    </div>

                    <div class="biaoqing" @click="Printscreen">
                      <svg :style="`width: 25px; height: 25px; fill: ${IsdarkMode ? `${this.SelectMycolor}` : '#5a5a5a'}`"
                        t="1686790196674" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="3575" width="200" height="200">
                        <path
                          d="M779.7 588.6c-23.2 0-45.3 4.4-65.7 12.5L282.9 108.3c-10.2-11.6-27.9-12.8-39.5-2.6-11.6 10.2-12.8 27.9-2.6 39.5l424.4 485.1c-39.3 32.8-64.3 82.2-64.3 137.2 0 98.6 80.2 178.8 178.8 178.8 98.6 0 178.8-80.2 178.8-178.8s-80.2-178.9-178.8-178.9z m0 301.7c-67.7 0-122.8-55.1-122.8-122.8 0-67.7 55.1-122.8 122.8-122.8 67.7 0 122.8 55.1 122.8 122.8 0 67.7-55.1 122.8-122.8 122.8z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#5a5a5a'}`" p-id="3576"></path>
                        <path
                          d="M779.7 105.6c-11.6-10.2-29.3-9-39.5 2.6L309 601.1c-20.3-8.1-42.5-12.5-65.7-12.5-98.6 0-178.8 80.2-178.8 178.8s80.2 178.8 178.8 178.8c98.6 0 178.8-80.2 178.8-178.8 0-55.1-25-104.4-64.3-137.2l424.4-485.1c10.3-11.6 9.1-29.3-2.5-39.5zM243.4 890.3c-67.7 0-122.8-55.1-122.8-122.8 0-67.7 55.1-122.8 122.8-122.8 67.7 0 122.8 55.1 122.8 122.8 0 67.7-55.1 122.8-122.8 122.8z"
                          :fill="`${IsdarkMode ? `${this.SelectMycolor}` : '#5a5a5a'}`" p-id="3577"></path>
                      </svg>
                    </div>

                  </div>

                  <div @keydown="EditTexthandleEvent" contenteditable="true" ref="editmsg" id="editmsg" class="msgtxt"
                    @input="updateHtml" @mousedown="recordCursorPosition" @keydown.enter.prevent
                    @keydown.shift.enter.prevent="insertNewLine">
                  </div>

                  <!-- <textarea @keydown.enter.prevent title="enter 键可快捷发生信息,shift + enter 换行" v-model="msg" class="msgtxt"
                    style="font-family: 'KaiTi'"></textarea> -->

                  <button @keydown.enter.prevent title="enter 键可快捷发生信息" id="sendgoto" @click="sendmsg"
                    :disabled="flagsetInterval != null" :class="`${flagsetInterval == null ? 'sendmsg' : 'disabledsendmsg'
                      }`" :style="`border:${IsdarkMode ? '1px solid #454546' : '0'};`">
                    {{
                      flagsetInterval == null
                      ? "发送"
                      : `${10 - multinum_err}秒后自动重试`
                    }}
                  </button>
                </div>
              </div>

              <!-- 2  设置 -->
              <div class="msgleft3" v-else-if="IsSetItemShou" @click="CloseSetImg">
                <TopBar @child-ShowAIWords="ShowAIWords" @child-editcurrentNameClick="editcurrentNameClick"
                  @child-Resize="Resize" @child-editcurrentNameevent="inputhandleChange"
                  @child-openJournal="SwitchContentBox('朋友圈不刷新')" :SelectMycolor="SelectMycolor" :smallPhone="smallPhone"
                  :parentisshowEdit="isshowEdit" :current="null" TopTitle="设置" :ReqMessagesCount="ReqMessages.filter(
                    (r) => r.uuid == current.uuid && r.isshow == true
                  ).length
                    " :OnlineCount="OnlineCount" :IsdarkMode="IsdarkMode">
                </TopBar>

                <div style="flex: 95%; font-family: 'KaiTi'" class="setingbox">
                  <!-- 第一块 -->
                  <div :style="`border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                      border-bottom: 0;
                      margin: 16px;
                      border-radius: 8px;`
                    ">
                    <!-- 头像-->
                    <div :style="`display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        height: 43px;
                        border-radius: 8px 8px 0 0;
                        border-bottom: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};`
                      ">
                      <div class="settingline">
                        <div class="settingline_supH6">头像</div>
                        <div class="settingline_subtit">
                          设置我的专属头像 (点击头像修改)
                        </div>
                      </div>
                      <div style="display: flex; align-items: center" @click.stop="IsSetShowMyImg = false">
                        <img style="border-radius: 5px; margin-right: 3px" class="msgleft3topuserimg" :src="LoginUserImg"
                          alt="Alternate Text" @click="EditloginUserName" />
                      </div>
                    </div>

                    <!-- AI头像-->
                    <div :style="`display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        height: 43px;
                        border-bottom: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                        border-radius: 8px;`
                      ">
                      <div class="settingline">
                        <div class="settingline_supH6">AI头像</div>
                        <div class="settingline_subtit">设置AI专属头像</div>
                      </div>
                      <div style="display: flex; align-items: center" @click.stop="IsSetShowAIImg = false">
                        <img v-if="IsSetShowAIImg" style="border-radius: 5px; margin-right: 3px"
                          class="msgleft3topuserimg" :src="SetAIImgUrl" alt="Alternate Text" />

                        <input v-else :style="`width: 160px;
                            height: 25px;
                            margin-right: 3px;
                            border-radius: 5px;
                            outline: none;
                            border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                            font-size: 10px;
                            padding-left: 5px;`
                          " placeholder="粘贴你的图片url地址" type="text" v-model="SetAIImgUrl" />
                      </div>
                    </div>
                  </div>

                  <!-- 昵称块 -->
                  <div :style="`border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                      margin: 16px;
                      border-radius: 8px;`
                    ">
                    <div style="
                        display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        height: 43px;
                        border-radius: 8px;
                      ">
                      <div class="settingline">
                        <div class="settingline_supH6">昵称</div>
                        <div class="settingline_subtit">设置我的昵称</div>
                      </div>
                      <div :style="`display: flex; align-items: center; width: ${smallPhone ? '50%' : '33%'
                        }`">
                        <input @click="Tips('昵称暂不可修改')" :value="LoginUserName" readonly :style="`width: 100%;
                            height: 26px;
                            border-radius: 5px;
                            outline: none;
                            border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                            font-size: 12px;
                            padding-left: 5px;
                            text-align: center;`
                          " placeholder="" type="text" />
                      </div>
                    </div>
                  </div>

                  <!-- 第二块 -->
                  <div :style="`border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                      border-bottom: 0;
                      margin: 16px;
                      flex-direction: column;
                      border-radius: 8px;`

                    ">
                    <div :style="`display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        height: 43px;
                        border-radius: 8px 8px 0 0;
                        border-bottom: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};`
                      ">
                      <div class="settingline">
                        <div class="settingline_supH6">
                          随机性 (temperature)
                        </div>
                        <div class="settingline_subtit">值越大，回复越随机</div>
                      </div>
                      <div :style="`display: flex; align-items: center; width: ${smallPhone ? '50%' : '33%'
                        }`">
                        <div :style="`display: flex;
                            border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                            padding: 8px;
                            border-radius: 8px;
                            align-items: center;
                            width: 100%;`
                          ">
                          <span style="font-size: 12px">{{ Temperature }}</span>
                          <input style="margin-left: 8px; width: 100%" type="range" min="0" max="1" step="0.1"
                            v-model="Temperature" />
                        </div>
                      </div>
                    </div>

                    <div :style="`display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        height: 43px;
                        border-bottom: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                        `
                      ">
                      <div class="settingline">
                        <div class="settingline_supH6">
                          话题新鲜度 (presence_penalty)
                        </div>
                        <div class="settingline_subtit">
                          值越大，越有可能扩展到新话题
                        </div>
                      </div>
                      <div :style="`display: flex; align-items: center; width: ${smallPhone ? '50%' : '33%'
                        }`">
                        <div :style="`display: flex;
                            border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                            padding: 8px;
                            border-radius: 8px;
                            align-items: center;
                            width: 100%;`
                          ">
                          <span style="font-size: 12px">{{
                            FrequencyPenalty
                          }}</span>
                          <input style="margin-left: 8px; width: 100%;" type="range" min="-2" max="2" step="0.1"
                            v-model="FrequencyPenalty" />
                        </div>
                      </div>
                    </div>


                    <!-- 可以携带上下文 -->
                    <div :style="`display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        height: 43px;
                        border-bottom: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                        border-radius: 8px;`
                      ">
                      <div class="settingline">
                        <div class="settingline_supH6">
                          可携带上下文数量
                        </div>
                        <div class="settingline_subtit">
                          每次请求携带的历史消息数
                        </div>
                      </div>
                      <div :style="`display: flex; align-items: center; width: ${smallPhone ? '50%' : '33%'
                        }`">
                        <div :style="`display: flex;
                            border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                            padding: 8px;
                            border-radius: 8px;
                            align-items: center;
                            width: 100%;`
                          ">
                          <span style="font-size: 12px">{{
                            ContextCount
                          }}</span>
                          <input @input="EditContextCount" style="margin-left: 8px; width: 100%;" type="range" min="1"
                            max="100" step="0.1" v-model="ContextCount" />
                        </div>
                      </div>
                    </div>

                  </div>

                  <!-- 第三块 -->
                  <div :style="`border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                      border-bottom: 0;
                      margin: 16px;
                      display: flex;
                      flex-direction: column;
                      border-radius: 8px;`
                    ">
                    <div :style="`display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        height: 43px;
                        border-radius: 8px 8px 0 0;
                        border-bottom: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};`
                      ">
                      <div class="settingline">
                        <div class="settingline_supH6">API Key</div>
                        <div class="settingline_subtit">
                          使用自己的 Key 可避免请求速率限制
                        </div>
                      </div>
                      <div :style="`display: flex; align-items: center; width: ${smallPhone ? '50%' : '33%'
                        }`">
                        <input :style="`width: 100%;
                            height: 26px;
                            border-radius: 5px;
                            outline: none;
                            border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                            font-size: 12px;
                            padding-left: 5px;
                            text-align: center;`
                          " placeholder="Open API Key" type="text" />
                      </div>
                    </div>


                    <!-- 选择主题 -->
                    <div :style="`display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        height: 43px;
                        border-bottom: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                        `
                      ">
                      <div class="settingline">
                        <div class="settingline_supH6">
                          切换主题
                        </div>
                        <div class="settingline_subtit">
                          自定义主题
                        </div>
                      </div>
                      <div :style="`display: flex; align-items: center; box-sizing: border-box;;width: ${smallPhone ? '50%' : '33%'
                        }`">

                        <select :style="`display: flex;
                            border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                            height: 30px;
                            outline: none;
                            padding-left: 5px;
                            border-radius: 5px;
                            box-sizing: border-box;
                            align-items: center;
                            width: 100%;`" v-model="SelectMybackground" @change="handleSelectMybackground">
                          <option v-for="item in MybackgroundList" :value="item.value">{{ item.title }}</option>
                        </select>

                      </div>
                    </div>

                    <!-- 选择字体 -->
                    <div :style="`display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        height: 43px;
                        border-bottom: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                        `
                      ">
                      <div class="settingline">
                        <div class="settingline_supH6">
                          切换字体
                        </div>
                        <div class="settingline_subtit">
                          自定义字体
                        </div>
                      </div>
                      <div :style="`display: flex; align-items: center; box-sizing: border-box;;width: ${smallPhone ? '50%' : '33%'
                        }`">

                        <select :style="`display: flex;
                            border: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                            height: 30px;
                            outline: none;
                            padding-left: 5px;
                            border-radius: 5px;
                            box-sizing: border-box;
                            align-items: center;
                            width: 100%;`" v-model="SelectMyFontfamily" @change="handleSelectMyFontfamily">
                          <option v-for="item in MyFontfamilyList" :value="item.value">{{ item.title }}</option>
                        </select>

                      </div>
                    </div>



                    <div :style="`display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        height: 43px;
                        border-bottom: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};`
                      ">
                      <div class="settingline">
                        <div class="settingline_supH6">开启双向上下文</div>
                        <div class="settingline_subtit">
                          默认是单向，开启后会分析对话所有信息(会有对话大小限制)
                        </div>
                      </div>
                      <div style="
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        ">
                        <label class="checkbox">
                          <input @change="OpenBothwayContext" type="checkbox" v-model="IsOpenBothwayContext" />
                          <span class="checkmark" :style="`${IsdarkMode ? 'border:1px solid #454546' : ''}`"></span>
                        </label>
                      </div>
                    </div>


                    <!-- 电子猫显示 -->
                    <div :style="`display: flex;
                        justify-content: space-between;
                        padding: 10px;
                        height: 43px;
                        border-bottom: 1px solid ${IsdarkMode ? '#454546' : '#e6e5e5'};
                        border-radius: 8px;`
                      ">
                      <div class="settingline">
                        <div class="settingline_supH6">宠物猫</div>
                        <div class="settingline_subtit">
                          开启宠物猫
                        </div>
                      </div>
                      <div style="
                          display: flex;
                          align-items: center;
                          justify-content: center;
                        ">

                        <label class="switch">
                          <input id="openOrclose" v-model="IsShowCat" type="checkbox" @change="CatcheckboxChange">
                          <span class="slider" :style="`border:${IsdarkMode ? '1px solid #454546;' : '0px'}`"></span>
                        </label>

                      </div>
                    </div>





                  </div>
                </div>
              </div>

              <!-- 3 关于-->
              <div class="msgleft3" v-else-if="IsAbout" @click="CloseSetImg">
                <TopBar @child-ShowAIWords="ShowAIWords" @child-editcurrentNameClick="editcurrentNameClick"
                  @child-Resize="Resize" @child-editcurrentNameevent="inputhandleChange"
                  @child-openJournal="SwitchContentBox('朋友圈不刷新')" :SelectMycolor="SelectMycolor" :smallPhone="smallPhone"
                  :parentisshowEdit="isshowEdit" :current="null" TopTitle="关于" :ReqMessagesCount="ReqMessages.filter(
                    (r) => r.uuid == current.uuid && r.isshow == true
                  ).length
                    " :OnlineCount="OnlineCount" :IsdarkMode="IsdarkMode">
                </TopBar>

                <div class="myabout" :style="`flex: 95%;
                    font-family: 'KaiTi';
                    padding: 8px;
                    padding-top: 0;
                    border: ${IsdarkMode ? '1px solid #454546' : '1px solid #e6e5e5'};
                    margin: 16px;
                    border-radius: 8px;`
                  ">
                  <!-- 内容 -->
                  <p>
                    最近，关于 ChatGPT
                    的讨论越来越多，但大多数人仅仅将其视为一款聊天机器人，并从猎奇的角度去测试其人工智能的回答。然而，ChatGPT
                    不仅仅是一个猎奇的 AI 玩具， 未来它将会成为必备生产工具。
                  </p>
                  <p>
                    使用 ChatGPT 等 AI
                    工具可以提高我们的工作效率和解放我们的时间，让我们可以更专注于创造性的工作和创新性的思考。比如，ChatGPT
                    在文章修订、语气转换、语音录入、代码解释、创意思维等方面已经成为我不可或缺的工具。虽然
                    ChatGPT
                    目前的功能和表现还有待提高和改进，但它毕竟是未来工具的一部分，是我们
                    不断提高自己和适应未来的必要工具。我相信随着时间的推移，ChatGPT
                    的表现会越来越优秀，让我们的工作更高效，更具有创造性。
                    ChatGPT 之类的 AI
                    工具将用它巨大的语言知识库，为我们创造更多的价值。
                  </p>
                  <p>
                    但是由于种种原因，**访问受限，为了更好地使用
                    ChatGPT，业余时间自搭建本站。
                  </p>
                  <p>
                    本站仅供大家日常<b>学习测试使用</b>，因为觉得微信的UI很简洁，所以模仿了微信的UI，由于OpenAI的内部API以及其他基础设施费用，
                    如宽带服务器等都是博主自掏腰包购买💲，请大家珍惜使用🥰，服务器配置不高，
                    如果您在使用过程中觉得给你带来方便和不错的体验，可以赞助本站，赞助的费用购买更多的Key以及升级服务器，你的赞助<b>站长将不胜感激</b>🤗
                  </p>
                  <p>如有其他改进建议或想法可联系站长QQ：1503394447</p>
                  <p style="
                      display: flex;
                      justify-content: center;
                      flex-wrap: wrap;
                    ">
                    <img style="
                        width: 200px;
                        height: 268px;
                        margin: 8px;
                        border-radius: 6px;
                      " src="/wx.jpg" alt="" />
                    <img style="
                        width: 200px;
                        height: 268px;
                        margin: 8px;
                        border-radius: 6px;
                      " src="/my1.jpg" alt="" />
                  </p>
                </div>
              </div>

              <!-- 4 朋友-->
              <div class="msgleft3" v-else-if="IsShowFriend">
                <TopBar @child-ShowAIWords="ShowAIWords" @child-editcurrentNameClick="editcurrentNameClick"
                  @child-Resize="Resize" @child-editcurrentNameevent="inputhandleChange"
                  @child-openJournal="SwitchContentBox('朋友圈不刷新')" :SelectMycolor="SelectMycolor" :smallPhone="smallPhone"
                  :parentisshowEdit="isshowEdit" :current="null" TopTitle="在线网友" :ReqMessagesCount="ReqMessages.filter(
                    (r) => r.uuid == current.uuid && r.isshow == true
                  ).length
                    " :OnlineCount="OnlineCount" :IsdarkMode="IsdarkMode">
                </TopBar>
                <div style="flex: 95%; font-family: 'KaiTi'; height: 90%">
                  <Friend :IsdarkMode="IsdarkMode" @journal-GotoUser="GotoUser" style="height: 100%"></Friend>
                </div>

                <div style="
                    height: 5%;
                    background-color: #ffffff;
                    z-index: 9999999999999999;
                  "></div>
              </div>

              <!-- 5 朋友圈-->
              <div class="msgleft3" v-show="IsShowJournalBox">
                <TopBar @child-ShowAIWords="ShowAIWords" @child-editcurrentNameClick="editcurrentNameClick"
                  @child-Resize="Resize" @child-editcurrentNameevent="inputhandleChange"
                  @child-openJournal="SwitchContentBox('朋友圈不刷新')" :SelectMycolor="SelectMycolor" :smallPhone="smallPhone"
                  :parentisshowEdit="isshowEdit" :current="null" TopTitle="动态圈子" :ReqMessagesCount="ReqMessages.filter(
                    (r) => r.uuid == current.uuid && r.isshow == true
                  ).length
                    " :OnlineCount="OnlineCount" :IsdarkMode="IsdarkMode">
                </TopBar>
                <div style="flex: 95%; font-family: 'KaiTi'; height: 90%">
                  <Journal :SelectMycolor="SelectMycolor" :IsdarkMode="IsdarkMode" @journal-GotoUser="GotoUser"
                    ref="childJournal" @child-Tips="Tips" style="height: 100%">
                  </Journal>
                </div>
              </div>

              <!-- 6 我的 -->
              <div class="msgleft3" v-if="IsShowMy">
                <TopBar @child-ShowAIWords="ShowAIWords" @child-editcurrentNameClick="editcurrentNameClick"
                  @child-Resize="Resize" @child-editcurrentNameevent="inputhandleChange" @child-goback="childGoback"
                  @child-openJournal="SwitchContentBox('朋友圈不刷新')" :smallPhone="smallPhone" :parentisshowEdit="isshowEdit"
                  :current="null" TopTitle="个人中心" :SelectMycolor="SelectMycolor" :ReqMessagesCount="ReqMessages.filter(
                    (r) => r.uuid == current.uuid && r.isshow == true
                  ).length
                    " :OnlineCount="OnlineCount" :IsdarkMode="IsdarkMode">
                </TopBar>
                <div style="flex: 95%; font-family: 'KaiTi'; height: 90%">
                  <My :SelectMycolor="SelectMycolor" :IsdarkMode="IsdarkMode" :smallPhone="smallPhone" ref="mypage"
                    @journal-GotoUser="GotoUser" @child-NewChat="childNewChat" @child-Tips="Tips" style="height: 100%">
                  </My>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import VueMarkdown from "vue-markdown";
import VueClipboard from "vue-clipboard2";
import hljs from "highlight.js";
import "highlight.js/styles/github.css";
import Prompts from "../components/prompts.vue";
import Roleplay from "../components/roleplay.vue";
import Login from "../components/Login.vue";
import Friend from "../components/Friend.vue";
import Journal from "../components/Journal.vue";
import My from "../components/My.vue";
import Remind from "../components/remind.vue";
import Log from "../components/Log.vue";

import html2canvas from "html2canvas";
import ImageCompressor from "js-image-compressor";

import FontDetect from 'font-detect';

import { async } from "q";
 

import {deleteDb,IDBdbInit,IDBadd,IDBupdate,IDBreadAll,IDBgetpage,IDBdeleteAllData,IDBgetTop,IDBfirst} from '../api/indexdbhel'

export default {
  components: {
    VueMarkdown,
    VueClipboard,
    Prompts,
    Roleplay,
    Login,
    Friend,
    Journal,
    My,
    Remind,
    Log
  },
  directives: {
    VueClipboard,
  },
  data() {
    return {
      notification: null, //System通知
      IsdarkMode: false, //黑暗模式
      IsShowCat: false, //猫
      MybackgroundList: [
        { title: '简约模式', value: 'none' },
        { title: '护眼模式', value: '#c7edcc' },
        { title: 'VsCode模式', value: '#1e1e1e' },
        { title: '沉浸棕模式', value: '#2c2c2f' }, //color acadae
        { title: '暗黑高对比模式', value: '#1f2029' },
        { title: '浅黑模式', value: '#1f1f1f' },
        { title: '暗黑模式', value: '#191919' },
        { title: '骚男模式', value: 'pink' },
      ],
      SelectMybackground: 'none',
      SelectMycolor: 'none',
      MyFontfamilyList: [
        { title: '楷体', value: 'KaiTi' },
        { title: '微软雅黑', value: 'Microsoft Yahei' },
        { title: '仿宋', value: 'FangSong' },
        { title: '等宽', value: 'monospace' },
        { title: '闪电对雷鸣', value: '闪电对雷鸣字体' },
        { title: '凌氏随手体', value: '凌氏随手体字体' },
        { title: '缘缘体行书', value: '缘缘体行书字体' },
        { title: '暴躁漫画体', value: '暴躁漫画体字体' },
      ],
      SelectMyFontfamily: 'KaiTi',//选择的字体
      TabHistory: {}, //tab 历史
      ChatContentHistory: null, //点击人位置
      menus: [1, 2, 3], // 模拟数据
      rightClickItem: "",
      visible: false, // 是否展示右键菜单
      ContextCount: 15, //可以携带上下文条数
      top: 0,
      left: 0,
      mdVal: '```\nconsole.log("Hello World");\n```',
      Basewidth: "62.2%",
      Baseheight: "76.8vh",
      IsOpenBothwayContext: false, //是否开启双向上下文
      msg: "", //输入消息
      premsg: "", //记录上一次发送的消息
      IsSetItemShou: false, //显示设置页面
      IsAbout: false, //显示关于
      IsSetShowMyImg: true, //显示设置我的头像
      SetMyImgUrl: "/tx.jpg", // 【已过期】
      IsSetShowAIImg: true, //显示设置我的头像
      SetAIImgUrl: "/tx5.jpg",
      Temperature: 0.7, //温度
      FrequencyPenalty: 0, //-2.0到2.0之间的数字。正值根据新标记在文本中的现有频率惩罚它们，从而降低模型重复的可能性
      editcurrentName: "",
      CommentInfos: [], //朋友圈通知
      IsShowCommentInfos: false,
      isshowEdit: false, //是否显示编辑文本框
      current: {
        currentName: "AI小助手",
        uuid: 1,
        Iscommon: true,
      }, //当前对话
      //@ 用户列表
      AtOnlineUserList: [
        {
          useruuid: 2,
          username: "AI小助手",
          userimgurl: "ai.png",
        },
      ],
      SelectAtOnlineUserList: [],
      AtOnlineUserList_QueryHeigth: 0,
      IsShowAtOnline: false, //是否显示At框
      Userlist: [
        {
          currentName: "AI小助手",
          uuid: 1,
          msgCount:1,
          lastTime:this.GetSendtime(),
          lastMsg:'',
          IsAI: true,
          Iscommon: true, //是否普通模式
          imghtml: `<img style="border-radius: 5px;"  src="tx5.jpg"
												alt="Alternate Text" />`,
        },
        {
          currentName: "AI聊天室",
          uuid: 2,
          msgCount:1,
          lastTime:this.GetSendtime(),
          lastMsg:'',
          IsAI: false,
          IsMuchChat: true,
          isRead: true,
          Iscommon: false,
          imghtml: `<img style="border-radius: 5px;background-color: #fff !important;"  src="ai.png"
												alt="Alternate Text" />`,
        },
      ], //对话用户列表
      activeIndex: 0, //设置当前选中元素
      usercolseactiveIndex: -1,
      ReqMessages: [],
      AllReqMessages: [], //所有对话上下文
      Msglist: [
        {
          msg: `欢迎使用AI助手, 快来向我提问吧 !`,
          ismy: false,
          uuid: 1,
          Iscommon: true,
          isshow: true,
          time: this.GetSendtime(),
        },
        {
          msg: `欢迎来到AI聊天室 !`,
          ismy: false,
          uuid: 2,
          Iscommon: false,
          isshow: true,
          tag: "系统",
          imgUrl: "ai.png",
          provice: "小助手",
          time: this.GetSendtime(),
        },
      ],
      This_QunReadUserList_Index:-1, //显示已读群聊index
      IsShowMi: false, //@你了
      AtMiMsg: '',
      AtMiMsgId: '',
      cursorPosition: null, // 输入框光标位置
      textCoordinates: [], // 输入框文字坐标数组
      relevancemsgsLength: 0, //引用消息坐标 宽度
      relevancemsgsIndex: -1, //引用消息坐标 index
      relevanceSendmsgsID: '', //引用消息ID
      relevanceSendmsgs: '', //引用消息
      relevanceSendUser: '', //引用用户
      TiShiRedsetInterval: null, //消息提示定时器
      TiShiRedsetIntervalHash: {},
      OldMsgLenght: 0, //历史消息条数
      IsShowBaseLeftToolsDiv: true, //最左侧div是否显示
      IsShowUserListDiv: true,
      IsShowUserListDiv_Left: false,
      IsShowUserListDiv_Right: false,
      IsShowCopy: false,
      IsShowFriend: false, //是否显示联系人
      IsShowJournalBox: false, //是否显示朋友圈
      IsShowMy: false, //是否显示我
      ReSizeisFirstClick: true,
      IsShowSelectRole: false, //是否显示选择角色
      IsShowAIWords: false, //是否显示AI关键词
      IsShowRemind: false, //是否显示提示框
      IsShowLoginDiv: true, //是否显示设置昵称
      LoginUserName: "", //用户昵称
      LoginUserImg: "", //用户头像base64
      LoginUserProvice: "", //用户所在省份
      Loginuuid: "",
      LoginIsVip:0,
      AtUserName: "",
      AtUserImg: "",
      AtUseruuid: "",
      AtUserProvice: "",
      AtUserSendTime: "",
      AtSendMsgCount: 0,
      AtSendLastMsg: "",
      IsShowAtUserDiv: false, //显示@ 框
      MsgListBoxscrollTop:-1, //消息列表滚动距离
      MsgListPageIndex:0,
      MsgListPageSize:40,
      isMouseWheelHandled:false,
      
      IsShowbiaoqingDiv: false, //表情
      msgleft3msgcontent_Length: 0, //计算md文档变化刷新
      smallPhone: false,
      flagsetInterval: null, //请求频繁定时器
      multinum_err: 0, //请求频繁倒计时
      AutoscrollbarFlag: true, //新消息自动滚动
      OnlineCount: 0, //在线人数
      BiaoQingimages: [
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/027f18987ae24584ac45d62caa857c8b?x-expires=2001992400&x-signature=PC4abQcJl7g8fywaYD98Z%2FLpSi4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/0af8673e4d2445bf8e6e605915a769e8?x-expires=2001992400&x-signature=Vzn1MVZtsNlAHpZ08onkkBTv1Jw%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/1669fd475d3145c594fb23f2c603e12d?x-expires=2001992400&x-signature=fL%2FvptoqgIfL%2F8BPF8qFSd2T9ys%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/c96d86c6b1fd4cbaab7dcbfbcb396c79?x-expires=2001992400&x-signature=9mzJfF%2B8o%2F0uPW8aDusrEjOXMmc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/4b0366d5a5f341f6b7922b6b1d6a542f?x-expires=2001992400&x-signature=Qt2QUYF1f3pu20Id847wVakrcL4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/0fb1e76beb274a97ad95855ffd352ce9?x-expires=2001992400&x-signature=qTFFTFuHS5n%2BYgakAHrk%2FYQTjxM%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/33097cf5c0a94536812ed8281a8fcf05?x-expires=2001992400&x-signature=Un72LwZIr8ISpkEOhlKnVhMWUbQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/a24c46c08d2e438f9814da1e856f5746?x-expires=2001992400&x-signature=5z%2FnGgC8hYp46mHZ7ahlS7qaYtI%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/ce963464ca6f4494a7ec12ae876dbdeb?x-expires=2001992400&x-signature=IhZ44dM6cbtboS4B8qfS2wp0nAo%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/8393bc93c5254c2eb35bda039b77eeb0?x-expires=2001992400&x-signature=4sncSN0Lgek0d%2ByLs7htOfkfaAY%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/c9f55f406c4e40fb91c9213d138237a1?x-expires=2001992400&x-signature=kWFdbPDCheZ4dIVynQ8Bkv4hOqE%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/b633e5c6fa43488e862c6abfe12301e9?x-expires=2001992400&x-signature=NBNKQC0RjfzS16WTrxcizWbFYtA%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/252fd6f8e27b4f85b624abf63ed417d1?x-expires=2001992400&x-signature=tvfARsDZBTzkmZSxH5vidRZw13Q%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/6ebde88e4d5a4f318bb49e24860f117e?x-expires=2001992400&x-signature=s3xmoGltqND11NGTt0fsAWYFNqA%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/14fb345e9328449f81c3c4b2af7d6887?x-expires=2001992400&x-signature=0YjkwOWltokAMF3qUzNOBg%2FEGFE%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/fb98c44e0fe6456ab0b5b9ce78639e4e?x-expires=2001992400&x-signature=tonr61Z260xwtAZhT6JcvC0aCVA%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/77c0a67675f14346bc0eaf50f3ad30c3?x-expires=2001992400&x-signature=Q0HtLKrIzJSxqySyeBoLkuXP12E%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/33da37aea35f4653bae83f1a64c93f33?x-expires=2001992400&x-signature=rRFkENEIbiIRp6o1PImn1SL5OtI%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/f1e90f0fa85f4bf297ca0e6e7773696d?x-expires=2001992400&x-signature=PgwPv0O%2BoUnfW4345j4SUFpIe3Q%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/4efc692bc22b46c8a744009e01117a20?x-expires=2001992400&x-signature=3oAkgJsaoROkkkE6R2HInUepgOI%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/a83663a97e8741778775cce2ec414238?x-expires=2001992400&x-signature=egkpNrS0l1VWcculye8qfriAqdQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/d18c0d85bb3545b4bdc14ea8dd132303?x-expires=2001992400&x-signature=gUzegOhxLS1kGPFIsDecNejaoCE%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/0731f22418c84a109d5fc0a892dc8dae?x-expires=2001992400&x-signature=31fB0AGl4GobnPWJ0L%2B19F0VJGk%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/e8b4d381ceb94b68b39280abfd41885c?x-expires=2001992400&x-signature=Uv82gfc0Svr3%2FFZIYLR2700y0pw%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/dc2e61e822f04598b01c5a5e8a8d1275?x-expires=2001992400&x-signature=F9Pl44Llb1HVA0ov1zftdE78Uxg%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/fffbe00daf7f4548963a181f3ad04059?x-expires=2001992400&x-signature=rZe6IjVbs1jbF9FGd2qOwRyJRIU%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/256cb62b3acc47faa97c32ac66b48e5e?x-expires=2001992400&x-signature=IyAsyv4geyrKLyXElQaXHyomOPc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/ffad1cc8348546a68ef292f3d98d614c?x-expires=2001992400&x-signature=20tBLbKfvzxdxgN%2Bh6%2FmUvKFc6Y%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/9d954acb3f9a4d4e8bd5b586dded0308?x-expires=2001992400&x-signature=d2JCR2dT10aS8L%2Bvad87Vv4U6QY%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/92ace7b9a85941a3a514b5e34427c977?x-expires=2001992400&x-signature=PLZiG0CANi900fDI0YmszTp9At0%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/de3e63638734409d8720769d68df2984?x-expires=2001992400&x-signature=6GH66s%2FszDSbshlrOvLe0JBvrv4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/6be627ba37ce4e7085aa45f454927017?x-expires=2001992400&x-signature=tgp8F%2FeKaXWJZRjdsggceU7jKTI%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/662da6320b0a42f1835074f010e537a7?x-expires=2001992400&x-signature=Uv3H1XZd1QIRXwnyr0FdOQcGJIY%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/4e442fdec2eb45598533bb22267afad0?x-expires=2001992400&x-signature=pl7gYV9MxvKVz0nUm25bOthZrNk%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/2352535b668f4fb0aeb2043cad30c3ed?x-expires=2001992400&x-signature=LWmN3NZagYlLEcq8GspcpI0LbnY%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/6a547f0aa4634f73898f3b885064f086?x-expires=2001992400&x-signature=hREFdTO9lDBP%2BguXGJVUMYca4Gw%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/569b364e6a6f48dfb13d72452308cb14?x-expires=2001992400&x-signature=U7PqOfaE%2F3hpQTe6oUiArVM5rwM%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/ff764c1724fb4088a6bf6df42bf243bb?x-expires=2001992400&x-signature=fFW7nHG9%2F7%2F71yk68GZWmQFSx4E%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/ae094ab0642f4d5983bee3270084ef3d?x-expires=2001992400&x-signature=GXSjQD5kIEe7GQ44sqR%2Bdydjo8Q%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/b58889fa702943bcad0b6495fd17e61b?x-expires=2001992400&x-signature=yT%2BaxDqnY7EMagPUPB8%2BRdCP4f8%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/a9ef7788b1134b4bb1a7da0ff5e5e2af?x-expires=2001992400&x-signature=M4zy%2Bih5iksFWhGajWqEGkTtn%2Fo%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/587c3f3c51b24ee5a5c396700843f863?x-expires=2001992400&x-signature=wj3C1dvepyODtoZxoxq5MzcCbVk%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/3c4d9da0f38048d3a8471fd1e53cd232?x-expires=2001992400&x-signature=5awDeqLO3DB%2FINMVjb5t28KdXbQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/4025a34771e24c8d8d173e17aee87131?x-expires=2001992400&x-signature=Ee76C3XPv1IJrgP9w%2BoojMNCURU%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/5aa32249bd604f9fadd3e6156bd2679b?x-expires=2001992400&x-signature=iZpPYVbK0Ec6OuZqk%2B2lSvWKQ48%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/3ad947825aa04124948799f36f010f6e?x-expires=2001992400&x-signature=7ppgM4qbd4ESGLIndH%2BMHrB8UUU%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/6a1833472e574d72aaedad05dde7bb73?x-expires=2001992400&x-signature=gMke1tG%2B%2BSrKEA%2Bnmd3dZuj8I70%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/b1672c442d9b448492bef59644404e09?x-expires=2001992400&x-signature=e4pbuBVR%2B3nxb4A1gGz7krpQfX4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/1fdfb81c679543f2bffda2464ea6d031?x-expires=2001992400&x-signature=hrAqtAzXUivta4YttyVxjlDbfTM%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/1efc5ed9026f4205a3b641864ebf09d2?x-expires=2001992400&x-signature=mQp0mlvCCPNJpkaqKrse71qjrHs%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/0bde34752b5b4d3f88a35f9095eeaf2b?x-expires=2001992400&x-signature=lKVpoXqDR6usr0tkcMwW0s%2FkW24%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/63cae9f098fe4fdcbfcc0bbef32bed8b?x-expires=2001992400&x-signature=A1677MjRT2UQeGb1v0BQ1zeVSXg%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/149dec02868f43719ea0b9093e464727?x-expires=2001992400&x-signature=q5xSl1BhB%2FNf2iP1VDKQwunTOaw%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/b94d7db4ab1e40ab82480480d67a68fb?x-expires=2001992400&x-signature=U8JmM%2FETMIvSd9lTB%2B2GOxprOvE%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/aa8a43b2b2974fe0b389ebbe95e6dcb8?x-expires=2001992400&x-signature=CYL%2F77WmCi%2FfkjA0hYw6ptn7aCc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/ade226ead8124567908a30439ede1174?x-expires=2001992400&x-signature=3B3o9vN5vUs%2FqvIZt1ngyEoFhZE%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/5180a72feeb347f18df349a87423180a?x-expires=2001992400&x-signature=%2BGYUU8COV8fYc3uZWzjbRQO3iBo%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/fc0606b4b93d475f828af636ad6b1951?x-expires=2001992400&x-signature=Yvi6FXk8fPqEuEyttPRKBEcsUIw%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/dfe070d439274773825fa31f1b983a70?x-expires=2001992400&x-signature=08RjEeWcfMzBs765CFdWk8odfEg%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/620b616d8c1146168295fc506ad5bedc?x-expires=2001992400&x-signature=09DrABDPqmwLpf6WW7Sv94r7naI%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/b611aa20a2e940c6ae4f9685e44fc837?x-expires=2001992400&x-signature=uIhlsHsyV%2Fo8I0qjNxy2wBFe5YQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/bf2c2771a5a649fbaa0b06225760c054?x-expires=2001992400&x-signature=NGX3lToxcFMIPITYluTmNK8Fw70%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/461215cbcab540d3b2b34f1c6cc48a27?x-expires=2001992400&x-signature=%2By6Ifs9ZWVjwKT7g6bNC8jvJwKs%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/510120a3f1c94faabbbd63288e0f6950?x-expires=2001992400&x-signature=Rv1mVo4UuzM7wiqJp%2BVAkJtUFE8%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/4643838b8f0f48dcad164ea41578ade1?x-expires=2001992400&x-signature=ap3hapJNj6vtPYfld8i25aDROPM%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/e50eb22975884d7fb14709151ee7d313?x-expires=2001992400&x-signature=LSWPiL3Pf0X1sL9kS1IhTAkPxuc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/3933e307e51043be8d532437772db14a?x-expires=2001992400&x-signature=Zert8hHc2sN4SS4%2Ba8QqKX5czsQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/600a672a58b44627a11a98eeb7018ff7?x-expires=2001992400&x-signature=aXGtEgDDyVFe%2Ftn0sH2VgQnf%2F0k%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/6e1607c92eb746828203a3b46300e413?x-expires=2001992400&x-signature=VmjVrW1ThEzOV%2Fx4d0W1rWHeTzI%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/5922dacc5b2e40888d8aeb966dcc37ce?x-expires=2001992400&x-signature=IYoSoE0TgSod5%2BCmFmEPHiNwohc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/3d6b61ff99f1498198d32ab1ba025bcb?x-expires=2001992400&x-signature=%2FhQm%2Fqysr1I%2BJegAiyoDjMzTG9w%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/a65d99cd56cd49ed84652c8e7e8cf66e?x-expires=2001992400&x-signature=doh9TGs3V%2Bw9UAPxv0WBa84gFE8%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/c24d922da13c4f1bbb4277867fb9a341?x-expires=2001992400&x-signature=ipDzlnRhQnqdVfq2A%2B4pPcle4AQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/fc141bce549b426eb7f0fc85e560346a?x-expires=2001992400&x-signature=3GNu3zGdKzgw%2Fo9NHR9UMJklvZ8%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/e12d8eca3605425cb3a2bc903659510f?x-expires=2001992400&x-signature=EbyADvaBtHPI%2FPUR3657yoT2tHE%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/5ab5e4e50fb8403fae8ba4f57dafe4c6?x-expires=2001992400&x-signature=QJg7RC6T%2Ff8ZSOdtY5vnQy585f4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/ddf10366def8409392bd0a6f79799280?x-expires=2001992400&x-signature=rZ00eOhhXKlH3UHGNGiPerRCkG4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/2b230fcf32e9438683e66fd893356650?x-expires=2001992400&x-signature=hiWVCaf351Cfr92vqwA2KKKeYSk%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/f405ae73381c4bb3a56f0bcd048c671c?x-expires=2001992400&x-signature=ZNWlw73PN5Yffmrb%2BkxoygXd1jo%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/a1dced860baf4101988d629727323095?x-expires=2001992400&x-signature=I717mcjsvWF8KY53pO15YRP1w%2BE%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/14e066d4852d4291a8ac95f2db69ea8d?x-expires=2001992400&x-signature=mb5qdFGgdsOM7ncac3lpLYXWHGs%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/9f786e020de249049dcb7acd5ab4a037?x-expires=2001992400&x-signature=1CDsJtR7j9jo2GyYQU0%2FT6L6WUA%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/98359df66e82438db8a3831ec3f46924?x-expires=2001992400&x-signature=a3EH0IXnQinxiX3%2BjICMQpedaFY%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/f268d5d83aef4ed58131fa8aa5ceefe2?x-expires=2001992400&x-signature=eRiQutYkFh%2BpeDXeyfKAl3hDwN4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/04edca9fcab640eea12636ba5b5c113d?x-expires=2001992400&x-signature=xqWUgjeAA%2BzmA%2B%2BovKAax99nHpI%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/05b04bbd26ca45c0a3249825a5342043?x-expires=2001992400&x-signature=82BLumOM4hDaWDCf%2FqSOm9YTg60%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/fc94a07200204a3b93eacb501b380d2c?x-expires=2001992400&x-signature=tWINKw%2F7MmWPKBYGegWrJU5gWQY%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/36bd61dd883f444f8aea46d1d896ec79?x-expires=2001992400&x-signature=kOwqCCs2ljyNiU9MoE3aj6z390Q%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/59258918a7664c568c494ad7b00c9dd6?x-expires=2001992400&x-signature=qpcLUW93ghNKHhS9qAwT7uj9LgY%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/cbae308619d74a679d5eaa2c8fa1960a?x-expires=2001992400&x-signature=SUQNrGo8m2ZqjeREr5qPaMEM9tw%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/dc488153b3fc421d9aae47c32da077f8?x-expires=2001992400&x-signature=UvJCnmyDENczKxIiLxea9fvt0QM%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/82206c0fea9d42cc9562cc6d7a208a8f?x-expires=2001992400&x-signature=OFIxKCECSTw9YtczZk1CL9ZUFqk%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/0df3e33bdc2b48c3b76939982599bca8?x-expires=2001992400&x-signature=Vwe5gNWbyir8UYxZuJ8TpYJOgc4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/5c44f24b19e64c02bdedaa78ec60bcfc?x-expires=2001992400&x-signature=FbYIj77oZhYr4GELPYAOxwYYwGo%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/b008dd1b87ed49768631ca7ddeac0ff0?x-expires=2001992400&x-signature=5yFDo0FXHgUMZ3xUaqiemD4Dxik%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/66bb44f372e6429c93bb7c8b15baee55?x-expires=2001992400&x-signature=d%2F0CfyvCWfFNEc59mH0WvlSa82Q%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/9ff5b0c6af6f45aeb29ddf6e7b440856?x-expires=2001992400&x-signature=5m3Rb8pUsptO6dwwU0PmOz6BgJ4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/52f7c8dc8ae94eea8693428d3e009546?x-expires=2001992400&x-signature=zl3G1KPqQiYSoRQwvvoDp5bcDfo%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/e2d4bec7745c4c18a1411567af40b522?x-expires=2001992400&x-signature=EY0VoR5ApMZhxYPhIWLYTNw6kP4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/8ad87ecc2fbc467fa94e7fd46a184eff?x-expires=2001992400&x-signature=v8KhrmVb%2FSOPuU2ToCIj7FkIy%2BQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/6927fe38ceb44647997e8b8df0160adb?x-expires=2001992400&x-signature=s%2FHeMKwqZl8yFq4jyemcTqVK04A%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/fc8a01a297f944dfaffb19101dd98749?x-expires=2001992400&x-signature=ISKfbW5Xck4cK7EoI2Vq0RNrq%2F0%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/e8c8b4fc634f46ce946b6f52becf3601?x-expires=2001992400&x-signature=n5cpTbTnnmQlzKtzsb94K%2F7BdJI%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/bf8846969fa34ca18f3bc015d418ec8e?x-expires=2001992400&x-signature=QhhcX2hqgP%2Be8ntCl83e3DjppkQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/d9c7bf3e2e224c5db72868982cf9c142?x-expires=2001992400&x-signature=BlswiCGzAAaQLU9z9EyliDQnXO8%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/c41def7ee65c4141bf9a303584fb14cb?x-expires=2001992400&x-signature=gH6NICmucSzZZ1RkLoxatD0tBsw%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/07bc19f5af5a4dff911c86405e2fa9c0?x-expires=2001992400&x-signature=iPMD%2F80870rdIiEy9csZHkgh5XQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/c6399cb2ab324ab0916911a33a0eb996?x-expires=2001992400&x-signature=mbMHQ2Or79UK5RQMgxtqypcF4%2Bo%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/85297fc1e3c943b5815f9eb425c1bb85?x-expires=2001992400&x-signature=YfCcKaOY5KX8Rx%2BBKGzSNlhiY8Y%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/8f57df83bb7a47a6bf7d1dd5daade3e5?x-expires=2001992400&x-signature=yH3qp%2BAXGYbjB5%2FinRtXDszjk4c%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/a4ac532b1cba4bd19e8363ed9a765748?x-expires=2001992400&x-signature=pzn%2Fwx%2FqTedhjNiCgUyPwlO8TAc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/99ccdf5997684ff3aa4ad099d667bed6?x-expires=2001992400&x-signature=8omd6QVtFggUiB8jGR5Hqebh4ic%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/bd1f6dfd32c74e0eb101534e909fb6ac?x-expires=2001992400&x-signature=EmcUWNhHbo9KHWpoOVHr06fRzQM%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/40288b91c565413d8762c8ef111a7974?x-expires=2001992400&x-signature=wvSMpy9d8Io2Ol7l6vdx5k0MANQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/5b9579bee9ab44ee9500c2a427a4b140?x-expires=2001992400&x-signature=FbKLx2FP%2Bl10%2BF7RnRB7fuBTgYM%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/b92f160cffdb42f0bd7157fd8526362c?x-expires=2001992400&x-signature=ReMa6de3EIfnWeu3pHK3%2FolVNTc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/978c5944bfc8440bba54a2ecbb46377f?x-expires=2001992400&x-signature=mLkuTDBuglgSGa1a6LGu7GDhsoc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/d0f747264185481aa101bb2558117a0e?x-expires=2001992400&x-signature=NviY3HaRLoNGsNGXESe3HscQCWA%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/17713ead59634e64a09dfa6f10d4522a?x-expires=2001992400&x-signature=0VlTMBvw9ZcQL%2F1VM4EhHgNEb%2B8%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/388c7e6621f14e4f95cece1bf0e85486?x-expires=2001992400&x-signature=%2BLUh6uN5bypWFKQ9uVoLBDmABzM%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/e34f8958f3a445e1a2c0c1e8abf32a3f?x-expires=2001992400&x-signature=vJMIUKpvKyZ6sNGWMsPP6CiyUjY%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/2b125bad40f9442ebe9ab4468c95df41?x-expires=2001992400&x-signature=B%2BTh%2FUXng2z1%2BpO5avGvn9AR5Qw%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/a41af10928a144fba744f51d80aa7ce0?x-expires=2001992400&x-signature=1M6aCbNqI8rzmbB10FOk6pFmXpM%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/f61ef5770f464e348a8c6352ca28db29?x-expires=2001992400&x-signature=33nM1W%2Bq0kdZCoYkVwjQv3Vq5BA%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/ca65d5e86cce42e7a387a0959cf165a5?x-expires=2001992400&x-signature=toDTlOdeXeTNJ5r%2Fxtyw20TtHtg%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/c0922d3e5c9641428db2c1a4b5ff6f7e?x-expires=2001992400&x-signature=cGHkuOih%2Fac1bJjrvNlIkLGGz9E%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/2dc8d5001bf64e5793e16154f7cb2367?x-expires=2001992400&x-signature=T8f1PqEJBC9cQGSj4LfxX3IPPbE%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/c497bfcbba38439cb60d63618e3c0490?x-expires=2001992400&x-signature=AfkPZr0WpINkOn3Z1un9ggxnA2k%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/c0e62d3f855f47459f80bcf85e0b7aa0?x-expires=2001992400&x-signature=K22qTpWKHbdju1Q5Moehf1xU7SQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/9c1196e8737c4b829cb50cf43b052943?x-expires=2001992400&x-signature=7SKN3FLQmWNzx3LMuX7cu2PTYFc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/32482647c62143289f80319ee17de9bd?x-expires=2001992400&x-signature=awrWMHkYihr2ilFPL2QqwpQBFK0%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/53d2b4ba583f42c8a94c17b215c68ae9?x-expires=2001992400&x-signature=%2F55x6MQtwUmOzXmOpEyls3jJfRY%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/e73739ec8be34618ae895f532f2c1474?x-expires=2001992400&x-signature=nLzRfo%2FrzJzWe3M4ZTFE%2Fkgl7hk%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/6b13c39ba5fb45febadec667a5e934eb?x-expires=2001992400&x-signature=WyUBvNm7rPLvU1jNa3DAGuEKn7g%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/068dee12346a4cae99d3814dd66f4c8e?x-expires=2001992400&x-signature=4b0wJzQ154AoFzgjWR8kMHYSy9c%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/c08bef62c84849e9a00e4a5e1a4a5768?x-expires=2001992400&x-signature=JoFChlUzXXkRO%2BS19JX6133RUMA%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/e70a247ae7ce4eb99b1e99d4ac4b9d37?x-expires=2001992400&x-signature=arB9ElzTBgDsn3rcywoAKFdiczg%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/1aaa056600b4463da75cf10bb7b88f1c?x-expires=2001992400&x-signature=iFEs7pYW2kYTsupLM1X%2FG%2Fi3HN4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/92a67f5188964604a7122c98e6b51517?x-expires=2001992400&x-signature=gz7EWTq9FesiwYMK34FantSI2Qs%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/81db4cb155d04333a65b19084edf58da?x-expires=2001992400&x-signature=1F%2BvFPOxFu9Tb5Yn8Zy4k%2F8UAPM%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/219fe10e7538481398b4210c74642955?x-expires=2001992400&x-signature=4SMWr2wNbrKlCRe%2B8E2wqMiPjAA%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/e29d7fb2413644a3a3a1040109aa8e5e?x-expires=2001992400&x-signature=IE4DKSzBG48kFI6M%2BJUdbpi3azU%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/4c5fc7955dac4ede8a448d8844197d8d?x-expires=2001992400&x-signature=k9wW9iXoNPwen0QFqWUK5Sal%2B%2Fs%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/3400aeaff5014e4686d3de227436277a?x-expires=2001992400&x-signature=I%2F6M5y1gHEi5oylWbf%2B8aYrKIFU%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/2e89b1845ee34e36bf578014d99d0871?x-expires=2001992400&x-signature=wawS98%2BhNC9aey%2FNqe3c3B0MGmE%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/63717bf2a3a7461facadcc9936abc469?x-expires=2001992400&x-signature=k7suhvxBsAjI5dWIgq1fy8R77Q8%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/ee14cffa95a346bf9e969e3e572bddc9?x-expires=2001992400&x-signature=cgSbp7uveBKVsNaXdhRIWUI3f1A%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/d6b56eeddb54422d99e402a810d89283?x-expires=2001992400&x-signature=OVOQPNCF8B8ZRqID4C8GEXIZNgg%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/e45d19e1f23d4e038c5243e5b006fb7e?x-expires=2001992400&x-signature=1KRmXS4mLJ9PGh3SmS2SyND9vys%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/d875a6b040544b01a1b4d7b03d5c001c?x-expires=2001992400&x-signature=N7aij83CMzCNgf25mg3qpP4K0EE%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/315d7cda9f0b4016929264f6efc7c4ec?x-expires=2001992400&x-signature=GYcp7PtSBybo6j1yRiRA%2B4IJPOc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/3930f00ed3b648fda8796d98ff71c02f?x-expires=2001992400&x-signature=iojgcuivpVwlyuy7FvcpZmtat4s%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/471fa9d56df4423aa03924094174b969?x-expires=2001992400&x-signature=QCNTkvT%2Fr36oN1WytnIojCbjEa8%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/685ae305fd9d4eda9b8b4a51aba68570?x-expires=2001992400&x-signature=t2jmRyD4%2BEy4bq9CFPouVwEeQI0%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/9ef71647a5ac47708a605b7f5a5d9f67?x-expires=2001992400&x-signature=i3EBztkJvHskCYauTAvXkAMClro%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/cb6adba274bb4a07930284759ff44de4?x-expires=2001992400&x-signature=uBdHNFfHW%2B1vySkQhmjhEsci4P0%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/b62a3b5cca9e4325aa66c0f7be29a6ae?x-expires=2001992400&x-signature=CBRJ1qqkIYTdyfE4a2eeOa7XiNw%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/16f338103eca459c92f543ce0a3c01c0?x-expires=2001992400&x-signature=DIsuK5KfSZB6yXhpisrnUBa5j8U%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/9454dc7371e54cdc9917fa375c56501c?x-expires=2001992400&x-signature=rXBAMx0zatqyDJEGwAsZpdh26fQ%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/823dc6974f53490db5aa19d8508a305d?x-expires=2001992400&x-signature=csIfGB5uSXFrU7uDgol8I268tlc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/852d1f0e957a4c05b91e5cfeed861bbb?x-expires=2001992400&x-signature=nmrWtL41oFWYTvYwNJtIdrqo7cg%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/ed04b6f349354c21a67b3f7026c637de?x-expires=2001992400&x-signature=G6ELaL1M2R8qbNIwKeJuyF2YjtI%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/0068a95556544bd0a425f1dd9494b088?x-expires=2001992400&x-signature=94Vp5Gr88FJlp4UTNdDyNRoqXv4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/f138e244b647456ebcde29f5b15b418e?x-expires=2001992400&x-signature=oXJMvBXUoXg%2BwH%2BnREVCYPWDJcc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/b7da4500cba84def9a05d55405813829?x-expires=2001992400&x-signature=8tTTu83JvfS9%2BXv9aQgl%2FS78CKk%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/2c98d6658431478396fd6e3b5ba01b1e?x-expires=2001992400&x-signature=X5IRal6y9xlDD8SpP83TlL5lQmU%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/2f60d5db04104599a37741f44a8a8149?x-expires=2001992400&x-signature=76pR6LK7ScWlXRJZvj5mHX6Umgg%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/eae23efa761a4235896c4a49ade83a77?x-expires=2001992400&x-signature=s6D%2BcyFoQJK4Ah0lxvnKPq%2BmiWs%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/9fb724d2d7fc490c810f4648225e055f?x-expires=2001992400&x-signature=4lazlj49WkNsE7X%2BP0aWNaSVs60%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/7cf30a5a6c5b410a87bc372371895a9c?x-expires=2001992400&x-signature=9vMGDfSbIAlsVP4KANfdCR3ByY4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/feec9cf9d2094c07a4eeaac6a189edea?x-expires=2001992400&x-signature=pO0hmPJPUVWoZGEZ87Gw3pnfV98%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/3566313c3ecb485cb0f853eee268204f?x-expires=2001992400&x-signature=rGpFWHWeXtDYafVLksog4bh2DJE%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/56e3169cfb5b400db45828dc4577dc70?x-expires=2001992400&x-signature=i9igCCTakVZgfyhWwQg33aGsy1Y%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/d483231a7ae9462f91a1a17529ffab8e?x-expires=2001992400&x-signature=AAJWvjKStSIXBMOURzoRpc08L8w%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/702cfa908cd4454f991ee3f579ab94b0?x-expires=2001992400&x-signature=PDOcEu%2FN%2Fy%2BHczVK2LtpB%2FmFLtc%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/f22d63942cec4f6fb7aee0f622116ffc?x-expires=2001992400&x-signature=n60muugkhAGcPRmLZ9ZgClLe%2ByM%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/cfa8a881bab847ca8561b4b9a65095a0?x-expires=2001992400&x-signature=rU7FLlC4c7Y16Rn%2BYg1UYxf9cW4%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/86300361e1754da8b3051f6d0f2de59b?x-expires=2001992400&x-signature=IFMIS5vQ5scrkXPE6vagLhu9Hnk%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/a603fa56a5524da1b817c17c0bf5cf81?x-expires=2001992400&x-signature=Ca9d0dGkKb8gIGb7Vay2%2Ffcso3Y%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/c5212395a2e84824a4dd62ab5f5ac206?x-expires=2001992400&x-signature=leCIa%2Fl0iRVTqMf2RjsZ3T%2BtcKk%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/3fcd38ec1061404aaf402f2f7b7343e2?x-expires=2001992400&x-signature=%2FuOaGryMU0OjZlDTt%2BGkm3xTBGA%3D&from=876277922",
        "https://p3-pc-sign.douyinpic.com/obj/tos-cn-i-tsj2vxp0zn/fdb9c022410c4003a19744465f56ea0b?x-expires=2001992400&x-signature=s5qn12fBwFV4giAmbubz4vNz9ks%3D&from=876277922",
      ],
      visibleElements: [],
      MsgList_readmsgids:[], //已读的消息id
      isReadThisMsg:false, //是否读取当前消息
      TipsTime_Info_Flag: null, //info提示计时器
      TipsTime_Info_IsTrue: false, //info提示计时器
      AtonlineusersSearch_KeyWord: ''//@ 搜索关键字
      //kkmsg: '' //中转消息
    };
  }, 
  async created() {
   
    // 7.30 版本 （删除以前缓存）
    if(localStorage.getItem('8_03_3_version') == null)
    {
      await this.ClearCacheAll()
      this.Tips('更新版本~')
      //await deleteDb('dbname')
      localStorage.setItem('8_03_3_version',true)
      //location.reload()
    }
   

    await IDBdbInit()
    //console.log('await dbInit()',await IDBdbInit());

    //await add()

    //console.log('read',await IDBgetpage(0,2));

    this.SystemPower()
    // 监听浏览器刷新事件
    window.addEventListener("beforeunload", this.handleBeforeUnload);
    window.addEventListener("pagehide", this.handleBeforeUnload);

    this.pushHistory();
    window.addEventListener("popstate", this.handleBeforeUnload, false);

    window.addEventListener("onmessageWS", this.getsocketData); //监听webscoket消息


    //监听粘贴 上传文件
    window.addEventListener('paste', this.ChatpasteUploadFile);


    //this.addRecord();

    let sendobj = {
      msgType: 99,
    };
    this.MyWebSockeSend(sendobj); //发送消息



    window.addEventListener("onlost_connection", r => {
      this.DiscoverConnection()
    }); //监听webscoket消息



  },

  async mounted() {


    //根据文本框监听 有时候不生效 （改为全局监听）
    // const editableElement = document.getElementById('editmsg');
    // editableElement.addEventListener('paste', this.kkk);


    //消息列表
    // var cachemsg = localStorage.getItem("gptmsgcache");
    // if (cachemsg != null) {
    //   this.Msglist = JSON.parse(cachemsg);

    //   this.Msglist.forEach((r) => {
    //     r.timeStr = this.formatTime(r.time);
    //   }); //刷新时间
    // }

    //请求参数
    var cachereqmsg = localStorage.getItem("gptreqmsgcache");
    if (cachereqmsg != null) {
      this.ReqMessages = JSON.parse(cachereqmsg);
    }
    //对话列表
    var cacheuserlist = localStorage.getItem("gptuserlistcache");
    if (cacheuserlist != null) {
      this.Userlist = JSON.parse(cacheuserlist);

      this.current.currentName = this.Userlist.filter(
        (r) => r.uuid == this.current.uuid
      )[0].currentName;
    }

    var gpttemperature = localStorage.getItem("gpttemperaturecache");
    if (gpttemperature != null) {
      this.Temperature = gpttemperature;
    }

    var gptfrequencypenalty = localStorage.getItem("gptfrequencypenalty");
    if (gptfrequencypenalty != null) {
      this.FrequencyPenalty = gptfrequencypenalty;
    }

    //头像缓存
    var setmyImgurl = localStorage.getItem("setmyImgurlcache");
    if (setmyImgurl != null) {
      this.SetMyImgUrl = setmyImgurl;
    }
    var setaiImgurl = localStorage.getItem("setaiImgurlcache");
    if (setaiImgurl != null) {
      this.SetAIImgUrl = setaiImgurl;
    }

    let loginUserName = localStorage.getItem("cacheLoginUserName");
    if (loginUserName != null && loginUserName != "") {
      this.LoginUserName = loginUserName;
      this.IsShowLoginDiv = false;
    } else {
      this.IsShowLoginDiv = true;
    }

    let loginUserImg = localStorage.getItem("cacheLoginUserImg");
    if (loginUserImg != null && loginUserImg != "") {
      this.LoginUserImg = loginUserImg;
    }

    let loginuuid = localStorage.getItem("cacheLoginuuid");
    if (loginuuid != null && loginuuid != "") {
      this.Loginuuid = loginuuid;
    }

    let loginIsVip = localStorage.getItem("cacheIsVip");
    if (loginIsVip != null) {
      this.LoginIsVip = loginIsVip;
    }


    let cacheMsgList_readmsgids = localStorage.getItem('cacheMsgList_readmsgids')
    if (cacheMsgList_readmsgids != null) {
      this.MsgList_readmsgids = JSON.parse(cacheMsgList_readmsgids);
    }

    let thisselectMyFontfamily = localStorage.getItem('cacheSelectMyFontfamily')
    if (thisselectMyFontfamily != null && thisselectMyFontfamily != "") {
      this.SelectMyFontfamily = thisselectMyFontfamily;
    }


    let thisselectMybackground = localStorage.getItem('cacheSelectMybackground')

    if (thisselectMybackground != null && thisselectMybackground != "") {
      this.SelectMybackground = thisselectMybackground;

      if (this.SelectMybackground == 'none') {
        this.IsdarkMode = false
      }
      else {
        this.IsdarkMode = true

        if (thisselectMybackground == '#191919' || thisselectMybackground == '#1f2029') //暗黑 - 暗黑高对比
        {

          this.SelectMycolor = '#bbbbbb'; //全局字体颜色色
        }
        else if (thisselectMybackground == '#2c2c2f') //沉浸棕
        {
          this.SelectMycolor = '#acadae'; //
        }
        else if (thisselectMybackground == '#1e1e1e') //Vscode 模式
        {
          this.SelectMycolor = '#acadae'; //
        }
        else if (thisselectMybackground == '#1f1f1f') //浅黑模式
        {
          this.SelectMycolor = '#acadae'; //
        }
        else if (thisselectMybackground == '#c7edcc') //护眼模式
        {
          this.SelectMycolor = '#181818'; //
        }
        else if (thisselectMybackground == 'pink') //骚男
        {
          this.SelectMycolor = '#181818'; //
        }

      }

    }

    if (localStorage.getItem('cacheIsShowCat') == null) {
      this.IsShowCat = true
    }
    else {
      this.IsShowCat = false
    }


    //@ 缓存提示
    let cacheAtMiMsg = localStorage.getItem('cacheAtMiMsg')
    if (cacheAtMiMsg != null) {
      this.AtMiMsg = cacheAtMiMsg
    }

    let cacheAtMiMsgId = localStorage.getItem('cacheAtMiMsgId')
    if (cacheAtMiMsgId != null) {
      this.AtMiMsgId = cacheAtMiMsgId
    }

    let cacheIsShowMi = localStorage.getItem('cacheIsShowMi')
    if (cacheIsShowMi != null) {
      this.IsShowMi = cacheIsShowMi
    }



    // if(localStorage.getItem('cacheIsIsdarkMode') != null)
    // {
    //   this.IsdarkMode = true
    // }
    // else
    // {
    //   this.IsdarkMode = false
    // }

    this.Codeformat();

    window.addEventListener("keydown", this.handleEvent);
    window.addEventListener("resize", this.handleResize);
    this.handleResize();

    // document.getElementById('editmsg').addEventListener("paste", this.pasteUpdateFile,false)

    this.currentitem(this.Userlist[0], 0); //默认选择第一个current
  },
  updated() {
    //滚动到底部
    this.$nextTick(() => {
      try {
        if (document.querySelector(".msgleft3msgcontent") != null) {
          document
            .querySelector(".msgleft3msgcontent")
            .addEventListener("click", (event) => {
              if (event.target.classList.contains("Atmsg")) {
                this.AtThisUser(event);
              }
            });

          document.addEventListener("mouseleave", function (event) {
            // if (event.target.classList.contains('Atmsg')) {
            //   AtThisUser(event.target);
            // }
          });

        }

        if (!this.IsSetItemShou && !this.IsAbout && !this.IsShowFriend) {
          const container = this.$el.querySelector(".msgleft3msgcontent");

          let thiscurr_msg = this.Msglist.filter(
            (r) => r.uuid == this.current.uuid
          );
          //if (this.msgleft3msgcontent_Length != container.innerHTML.length) {
          if (
            this.msgleft3msgcontent_Length !=
            thiscurr_msg[thiscurr_msg.length - 1].msg.length
          ) {
            this.Codeformat();
            if (this.AutoscrollbarFlag) {
              setTimeout(() => {
                //container.scrollTop = container.scrollHeight;
                container.scrollTo({
                  top: container.scrollHeight,
                  behavior: "smooth", // 可选，平滑滚动
                });
              }, 40)
            }
          }
          //this.msgleft3msgcontent_Length = container.innerHTML.length;
          this.msgleft3msgcontent_Length =
            thiscurr_msg[thiscurr_msg.length - 1].msg.length;
        }
      } catch (error) {
        //console.error(error);
      }
    });
  },
  destroyed() {
    // 组件销毁时需要移除监听器
    window.removeEventListener("beforeunload", this.handleBeforeUnload);
    window.removeEventListener("pagehide", this.handleBeforeUnload);
    window.removeEventListener("popstate", this.handleBeforeUnload);

    window.removeEventListener("keydown", this.handleEvent); // 在页面销毁的时候记得解除
    window.removeEventListener("resize", this.handleResize);

    window.removeEventListener('paste', this.ChatpasteUploadFile);

  },
  beforeDestroy() { },
  computed: {
    MsgDDLlist: function () {
      return function (uuid) {
        let msglist = this.Msglist.filter(
          (r) => r.uuid == uuid && r.isshow == true
        );
        msglist.forEach((r) => {
          r.timeStr = this.formatTime(r.time);
        });


        return msglist
        // // 去重操作
        // const uniqueIds = [...new Set(msglist.map(r => r.msgid))];
        // const uniqueArr = uniqueIds.map(id => msglist.find(r => r.msgid === id));

        // return uniqueArr;
      };
    },
    MsgLastTime: function () {
      return function (uuid) {
        let msglist = this.Msglist.filter(
          (r) => r.uuid == uuid && r.isshow == true
        );
        if (msglist.length == 0) {
          return;
        }

        return this.formatTime(msglist[msglist.length - 1].time);
        // if (msglist.length == 1) {
        //   return msglist[msglist.length - 1].time;
        // } else {
        //   return msglist[msglist.length - 2].time;
        // }
      };
    },
    MsgLastMsg: function () {
      return function (uuid,lastmag) {

         
         
        // let msglist = this.Msglist.filter(
        //   (r) => r.uuid == uuid && r.isshow == true
        // );

        // if (msglist.length == 0) {
        //   return;
        // }

        //let lastmag = msglist[msglist.length - 1].msg;

        if (uuid == 2) {
          if (this.IsShowMi) {
            return `<span class="atlastmsg" style="color:#e02727 !important;">[${this.AtMiMsg}]</span>`
          }
        }

        let loginuuid = localStorage.getItem("cacheLoginuuid");
        let loginusername = localStorage.getItem("cacheLoginUserName");
        if (lastmag.includes(`${loginuuid}`)) {
          lastmag =
            `<span class="atlastmsg" style="color:#e02727 !important;">${this.AtMiMsg == '' ? '' : `[${this.AtMiMsg}]`}</span>` +
            lastmag.replace(`@${loginusername}`, " ");
        }

        if (lastmag.includes("截图") || lastmag.includes("sendmsgimg") || lastmag.includes("zhanzhu")) {
           return "[图片消息]";
        }

        if (lastmag.includes("dymsg_emoji")) {
          if (lastmag.includes("截图") || lastmag.includes("sendmsgimg") || lastmag.includes("zhanzhu")) {
           return "[图片消息]";
          }
          else
          {
            return lastmag;
          }
        }   

        if (lastmag.length > 10) {
        }
        return lastmag.replace(/<[^>]*>/g, '');; //.includes('dymsg_emoji') ? '[]'
      };
    }
    // MsgLastMsg: function () {
    //   return function (uuid) {

    //     let msglist = this.Msglist.filter(
    //       (r) => r.uuid == uuid && r.isshow == true
    //     );

    //     if (msglist.length == 0) {
    //       return;
    //     }

    //     let lastmag = msglist[msglist.length - 1].msg;

    //     if (uuid == 2) {
    //       if (this.IsShowMi != '') {
    //         return `<span class="atlastmsg" style="color:#e02727 !important;">[${this.AtMiMsg}]</span>`
    //       }
    //     }

    //     let loginuuid = localStorage.getItem("cacheLoginuuid");
    //     let loginusername = localStorage.getItem("cacheLoginUserName");
    //     if (lastmag.includes(`${loginuuid}`)) {
    //       lastmag =
    //         `<span class="atlastmsg" style="color:#e02727 !important;">${this.AtMiMsg == '' ? '' : `[${this.AtMiMsg}]`}</span>` +
    //         lastmag.replace(`@${loginusername}`, " ");
    //     }

    //     if (lastmag.includes("dymsg_emoji")) {
    //       return lastmag;
    //       //} else if (lastmag.includes("Atmsg")) {
    //     } else if (lastmag.includes("截图") || lastmag.includes("sendmsgimg") || lastmag.includes("zhanzhu")) {
    //       return "[图片消息]";
    //     }

    //     if (lastmag.length > 10) {
    //     }
    //     return lastmag; //.includes('dymsg_emoji') ? '[]'
    //   };
    // },
  },
  watch: {},
  methods: {

    Msg_scrollIsMoveIsRead() {
    // 获取父元素的滚动偏移量
    const scrollTop = this.$refs.msgleft3msgcontent.scrollTop;
    // 获取父元素的高度
    const parentHeight = this.$refs.msgleft3msgcontent_base.offsetHeight;
     
    var allElements = document.querySelectorAll('.positionmsg');
                for (var i = 0; i < allElements.length; i++) {
                    var element = allElements[i];

                    const child = element
                    const childTop = child.offsetTop;
                    const childHeight = child.offsetHeight;
                    
                    // 判断子元素是否在父元素的高度内
                    if (childTop >= scrollTop && childTop + childHeight <= scrollTop + parentHeight) {
                      // 子元素在父元素的高度内可见
                       //console.log('子元素可见:', child);

                      let readmsgid = child.id


                     // console.log('发送人消息',child.getAttribute("data-useruuid"));


                      this.sendReadMsg(readmsgid,child.getAttribute("data-useruuid"))


                    } else {
                      // 子元素在父元素的高度外不可见
                      //console.log('子元素不可见:', child);
                    }
                  }
  },

  sendReadMsg(msgid,senduuid)
  {
    if(senduuid == this.Loginuuid)
    {
      //console.log('自己无需发生');
      return
    }
    else
    {

      if(this.current.uuid == 2 && senduuid == null)
      {

        return
      }

      var sendobj = {
        msgs: this.msg,
        msgid:msgid,
        msgType: 13,
        sendName: this.LoginUserName,
        receiveName: this.current.currentName,
        imgUrl: this.LoginUserImg,
        ismy: true,
        senduuid: this.Loginuuid, //this.current.uuid,
        receiveuuid: this.current.uuid == 2 ?senduuid:this.current.uuid,
        tag: "热心网友",
        time: "",
        relevancemsgid: this.relevanceSendmsgsID,
        relevancemsgs: this.relevanceSendmsgs,
        relevancesenduser: this.relevanceSendUser
      };
      //console.log('scoket_send',sendobj);
      this.MyWebSockeSend(sendobj); //发送消息
    }
    
    
  },
    // Msg_scrollIsMoveIsRead()
    // {

    //   console.log(666);
    //   this.$nextTick(() => {
    //             let baseelement = document.querySelector('.msgleft3msgcontent_base')

    //             let msgcontentelement = document.querySelector('.msgleft3msgcontent')

    //             var allElements = document.querySelectorAll('.positionmsg');

    //             var baseheight = baseelement.offsetHeight; //滚动区域高度
    //             const scrollTop = msgcontentelement.scrollTop; //获取鼠标滚轮移动距离

    //             let sumbaseheight = baseheight + scrollTop //判断元素是否可以在可视区看到
    //             for (var i = 0; i < allElements.length; i++) {
    //                 var element = allElements[i];

    //                 console.log('对比',sumbaseheight,element.offsetTop);

    //                 if (element.className == 'positionmsg' && sumbaseheight > element.offsetTop) {

    //                 //  console.log(element.offsetTop,element);

    //                     if (!this.visibleElements.includes(element)) {
    //                         //console.log('滚动距离顶部的偏移量：', scrollTop);
    //                         this.visibleElements.push(element);
    //                       //  console.log(element.offsetTop,element);
                            
    //                     }
    //                 }
    //             }
    //       })
    // },

   async  MsgListscrollIsMove() //消息列表滚动
    {
      
      if(!this.isMouseWheelHandled)
      {
        //console.log(' this.isMouseWheelHandled', this.isMouseWheelHandled);
        return
      }
      
      
        let msglistContent = this.$refs.msgleft3msgcontent

      let baseheight = msglistContent.offsetHeight; //滚动区域高度
      let scrollTop = msglistContent.scrollTop; //获取鼠标滚轮移动距离

 
      //console.log('this.MsgListBoxscrollTop',this.MsgListBoxscrollTop);
      if(scrollTop == 0)
      {
         
        this.MsgListBoxscrollTop = 0
        
        
        this.MsgListPageIndex = this.MsgListPageIndex+1
        this.isMouseWheelHandled = false
        let list = await IDBgetpage(this.current.uuid,this.MsgListPageIndex,this.MsgListPageSize)

        
        //console.log('list',list,this.MsgListPageIndex,this.MsgListBoxscrollTop );
        if(list.length == 0)
        {
          this.MsgListBoxscrollTop = -99
          
          if(this.Msglist.length > 10)
          {
            this.Tips('最后一条咯！')
          }
          
          return
        }
        
        let firstmgs = this.Msglist[0]

        console.log('firstmgs',firstmgs);
        list.forEach(r=>{
          this.Msglist.push(r)
        })
       
        this.Msglist = this.Msglist.sort((a, b) => new Date(a.time) - new Date(b.time));
        //console.log('当前消息列表',this.Msglist);
        this.Msglist.forEach((r) => {
          r.timeStr = this.formatTime(r.time);
        });
        this.MsgListBoxscrollTop = -1
  
       
 
        this.$nextTick(()=>{

          setTimeout(() => {

            let attopmsg = this.$refs[`${firstmgs.msgid}`][0]
            
            this.MsgListBoxscrollTop = -99
            //console.log('html',this.$refs[`${firstmgs.msgid}`]); 
            

            // console.log(attopmsg);
            // attopmsg.style.backgroundColor = 'red';
            // attopmsg.style.fontSize = '18px'
            //console.log('attopmsg',this.AtMiMsgId,attopmsg);
            const container = this.$el.querySelector(".msgleft3msgcontent");

            //let contentboxHeight = this.$refs.msgleft3msgcontent_base.offsetHeight

            container.scrollTop =attopmsg.offsetTop -50

            this.isMouseWheelHandled = true
            console.log('attopmsg.offsetTop',attopmsg.offsetTop);
          }, 0);
        })
        
        

       
        //刷新时间
      }
      // setTimeout(async () => {
      //   this.MsgListBoxscrollTop = 0
      //   this.isMouseWheelHandled = true
      //   //this.MsgListscrollIsMove()
      // }, 500);

      //console.log('消息列表',baseheight,scrollTop,this.MsgListPageIndex);
    },
    DiscoverConnection() {
      setTimeout(() => {
        if (localStorage.getItem('lost_connection') == null) {
          this.Tips_NonOver('网络异常,断线重连中...', 1000)
          this.DiscoverConnection()
        }
      }, 1000)
    },

    TipsTime_Info(tit) {
      clearInterval(this.TipsTime_Info_Flag)
      if (this.TipsTime_Info_IsTrue) {
        this.TipsTime_Alert(tit, 1000)
        this.TipsTime_Info_Flag = setInterval(() => {

          //this.TipsTime_Alert(tit,1000)
          this.TipsTime_Info(tit)
        }, 1000);
      }
    },
    RelevanceThisMsg(item) {
      //console.log(item);
      this.relevanceSendmsgsID = item.msgid
      this.relevanceSendmsgs = item.msg
      this.relevanceSendUser = item.sendName == undefined ? 'System' : item.sendName
    },
    ThisMsgConten(event, index) {
      this.relevancemsgsIndex = index
      const width = event.target.offsetWidth;
      //console.log(width);
      this.relevancemsgsLength = width
    },
    SystemPower() //系统权限检测
    {
      if (window.Notification) {

        switch (Notification.permission) {
          case 'default':
            this.Tips('为了良好体验请打开网站消息通知');
            this.defaultPermission();
            break;
          case 'granted':
            console.log('已打开通知权限');
          case 'denied':
            //this.Tips('为了良好体验请打开网站消息通知1');
            this.defaultPermission()
            break;
        }
      } else {
        this.Tips('暂不支持消息通知');
      }
    },
    defaultPermission() {
      Notification.requestPermission().then(permission => {
        switch (permission) {
          case 'default':
            break;
          case 'granted':
            console.log('已打开通知权限');
            //this.showNotification();
            break;
          case 'denied':
            this.Tips('为了良好体验请打开网站消息通知');
            break;
        }
      });
    },
  async GoToAtMiMsg() //群里定位@的消息
    {
      try {
       
 
 

        if(this.Msglist.findIndex(r=>r.msgid == this.AtMiMsgId) !== -1)
        {
          console.log('在列表');
        }
        else
        {
          this.Tips('定位中...')
          console.log('不在列表');
          let sigmsglist = await IDBfirst(this.AtMiMsgId);

           

          if(sigmsglist != null)
          {
          
            //console.log(sigmsglist.id);
            let topmsglist = await IDBgetTop(sigmsglist.id);
            //console.log(`取出大于${sigmsglist.id}数据`,topmsglist);

            this.Msglist = topmsglist

            let pageindex = this.Msglist.length / 10

            this.MsgListPageIndex = pageindex
            //console.log('爱他.MsgListPageIndex',this.MsgListPageIndex);

          }
        }

        console.log('this.AtMiMsgId-----',this.AtMiMsgId)

        this.$nextTick(()=>{
          setTimeout(() => {

            console.log('this.AtMiMsgId-----',this.AtMiMsgId)
            console.log('this.AtMiMsgId',this.AtMiMsgId, this.$refs[`${this.AtMiMsgId}`]);
            let attopmsg = this.$refs[`${this.AtMiMsgId}`][0]
          
            //console.log('attopmsg',this.AtMiMsgId,attopmsg);
            const container = this.$el.querySelector(".msgleft3msgcontent");

            let contentboxHeight = this.$refs.msgleft3msgcontent_base.offsetHeight
            container.scrollTo({
              top: attopmsg.offsetTop - contentboxHeight / 2,
              behavior: "smooth", // 可选，平滑滚动
          });


          this.AtMiMsg = ''
          this.AtMiMsgId = ''
          this.IsShowMi = false

          localStorage.removeItem('cacheAtMiMsg')
          localStorage.removeItem('cacheAtMiMsgId')
          localStorage.removeItem('cacheIsShowMi')
          }, 100);
        })

        } catch (error) {

         console.log(error);
          
        }
        finally
        {
          
        }


    },
    isSingleImgHTML(htmlStr) {
      if (htmlStr == null) {
        return false
      }
      // 使用正则表达式匹配img标签
      var imgRegex = /<img[\s\S]*?>/g;
      var imgMatches = htmlStr.match(imgRegex);

      // 如果匹配到的img标签数量等于1，并且字符串中不包含其他字符，则判断为只有一个img的HTML
      if (imgMatches && imgMatches.length === 1 && htmlStr.replace(imgRegex, "").trim() === "") {
        return true;
      } else {
        return false;
      }
    },
    EditContextCount() {
      if (localStorage.getItem('Lock_Power') == null && this.ContextCount > 15) {
        this.ContextCount = 15
        this.IsShowRemind = true
        this.Tips('暂无权限使用哦! 联系管理员吧。')
        return
      }
    },
    OpenBothwayContext() {
      if (localStorage.getItem('Lock_Power') == null) {
        this.IsOpenBothwayContext = false
        this.IsShowRemind = true
        this.Tips('暂无权限使用哦! 联系管理员吧。')
        return
      }
    },
    handleSelectMyFontfamily() {
      console.log('选择的选项是:', this.SelectMyFontfamily);

      // if (localStorage.getItem('Lock_Power') == null) {
      //   this.IsShowRemind = true
      //   this.Tips('暂无权限使用哦! 联系管理员吧。')
      //   return
      // }

      localStorage.setItem('cacheSelectMyFontfamily', this.SelectMyFontfamily)
      location.reload()
    },
    handleSelectMybackground() {
      // if (localStorage.getItem('Lock_Power') == null) {
      //   this.IsShowRemind = true
      //   this.Tips('暂无权限使用哦! 联系管理员吧。')
      //   return
      // }

      localStorage.setItem('cacheSelectMybackground', this.SelectMybackground)

      location.reload()

      console.log('选择的主题是:', this.SelectMybackground);
    },
    CatcheckboxChange() {

      if (!this.IsShowCat) {
        localStorage.setItem('cacheIsShowCat', 'cat')
        location.reload()
      }
      else {
        localStorage.removeItem('cacheIsShowCat')
        location.reload()
      }
    },
    ChatpasteUploadFile(e) {

      if (!this.IsSetItemShou &&
        !this.IsAbout &&
        !this.IsShowFriend &&
        !this.IsShowJournalBox &&
        !this.IsShowMy) {


        if (e.target.id != 'editmsg' && e.target.className != 'sendmsgimg') {
          console.log('非编辑框粘贴', e);
          e.preventDefault();

          this.Tips('请选中编辑框粘贴')
          return
        }

        var clipboardData = e.clipboardData || window.clipboardData;
        var items = clipboardData.items;

        for (var i = 0; i < items.length; i++) {
          var item = items[i];

          if (item.kind === 'file' && item.type.indexOf('image') !== -1) {
            var file = item.getAsFile();
            //var reader = new FileReader();
            let prefilename = file.name


            e.preventDefault();

            this.TipsTime_Info_IsTrue = true
            this.TipsTime_Info('上传中,请稍等！')


            console.log('文件');
            const formData = new FormData();
            formData.append('foldername', 'chathistory');
            formData.append('filename', prefilename);
            formData.append("file", file);
            axios.post(this.$BaseUrl + '/api/File/Upload', formData).then(
              res => {
                if (res.data.code == 200) {
                  console.log(res.data.data)

                  var img = document.createElement('img');
                  img.alt = "截图";
                  img.className = "sendmsgimg";
                  img.src = res.data.data;

                  // 将光标移动到图片后面
                  var selection = window.getSelection();
                  var range = selection.getRangeAt(0);
                  range.deleteContents();


                  range.insertNode(img);
                  range.collapse(false); // 将光标移动到最后

                  this.TipsTime_Info_IsTrue = false

                } else {
                  console.log(res.data)
                }
              })

            return
            // base64 显示（占用空间太大）

            // reader.onload = function (e) {
            //   var img = document.createElement('img');
            //   img.alt = "截图";
            //   img.className = "sendmsgimg";
            //   img.src = e.target.result;
            //   // editableElement.appendChild(img);

            //   // 将光标移动到图片后面
            //   var selection = window.getSelection();
            //   var range = selection.getRangeAt(0);
            //   range.deleteContents();


            //   range.insertNode(img);
            //   range.collapse(false); // 将光标移动到最后
            // };
            // reader.readAsDataURL(file);

          } else if (item.kind === 'string' && item.type === 'text/plain') {
            item.getAsString(function (text) {
              var selection = window.getSelection();
              var range = selection.getRangeAt(0);

              range.deleteContents();
              range.insertNode(document.createTextNode(text));

              range.collapse(false); // 将光标移动到最后
            });
          }
        }
        e.preventDefault();

      }
    },
    async EditTexthandleEvent(event) {
      // 记录当前光标位置输入的文字坐标
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        const rect = range.getBoundingClientRect();

        if (rect != undefined) {
          this.AtOnlineUserList_QueryHeigth =
            this.SelectAtOnlineUserList.length * 25;
          //console.log('当前高度',this.SelectAtOnlineUserList.length);
          if (rect.left == 0) {
            //@ 列表坐标赋值
            if (this.$refs.editmsg != undefined) {
              let rect2 = this.$refs.editmsg.getBoundingClientRect();

              this.cursorPosition = { x: rect2.left + 25, y: rect2.top };
            }
          } else {
            this.cursorPosition = { x: rect.left + 25, y: rect.top - 20 };
          }
        }
      }
    },
    AtThisUser(element) {

      this.AtUserName = element.target.dataset.username;
      this.AtUserProvice = element.target.dataset.provice;
      this.AtUserImg = element.target.dataset.userimg;
      this.AtUseruuid = element.target.dataset.useruuid;

      let atuserMsgs = this.Msglist.filter(
        (r) => r.senduuid == this.AtUseruuid
      );
      // if (atuserMsgs.length == 0) {
      //   return
      // }

      this.IsShowAtUserDiv = true;
      this.AtUserSendTime =
        atuserMsgs.length == 0
          ? "无"
          : atuserMsgs[atuserMsgs.length - 1].timeStr;
      this.AtSendMsgCount = atuserMsgs.length;
      const regex = /<[^>]+>/g;
      // 将 HTML 标签替换成空字符串
      this.AtSendLastMsg =
        atuserMsgs.length == 0
          ? "暂无发言"
          : atuserMsgs[atuserMsgs.length - 1].msg.replace(
            /<\/?[^>]+(>|$)|&nbsp;/g,
            ""
          );

      var x = element.pageX;
      var y = element.pageY;

      let thisAtthisUser = this.$refs.AtthisUser;
      thisAtthisUser.style.top = y + "px";
      thisAtthisUser.style.left = x + "px";
    },
    DoubleclickThisUser( //@
      user //双击
    ) {



      this.$refs.editmsg.innerHTML += `<span data-useruuid='${user.senduuid}'   data-username='${user.sendName}' 
      data-userimg='${user.imgUrl}' data-provice='${user.tag}' class="Atmsg" 
      style="color: #00a4ff;">@${user.sendName}</span>` + "&nbsp;";

      this.msg = this.$refs.editmsg.innerHTML

    },
    AtThis(item) { // @弹框 点击
      this.AtUserName = item.username;
      this.AtUserProvice = item.provice;
      this.AtUserImg = item.userimgurl;
      this.AtUseruuid = item.useruuid;

      // this.$refs.editmsg.innerHTML += `${item.username}` + "&nbsp;";
      // this.msg += `${item.username}` + "&nbsp;";


      //去除之前的@符号
      this.msg = this.msg.substring(0, this.msg.length - 1)
      this.$refs.editmsg.innerHTML = this.msg;


      this.$refs.editmsg.innerHTML += `<span data-useruuid='${this.AtUseruuid}'   data-username='${this.AtUserName}' 
      data-userimg='${this.AtUserImg}' data-provice='${this.AtUserProvice}' class="Atmsg" 
      style="color: #00a4ff;">@${this.AtUserName}</span>` + "&nbsp;";

      this.msg = this.$refs.editmsg.innerHTML



      this.IsShowAtOnline = false;
      this.AtonlineusersSearch_KeyWord = ''


      // let index = this.msg.lastIndexOf("@") + 1;

      // let lastindex = this.msg.indexOf(item.username[1]) - 1;

      // let str = this.msg.slice(0, index) + this.msg.slice(lastindex);
      // this.$refs.editmsg.innerHTML = str;
      // this.msg = str;
    },
    clickThisUser(element) {

      this.IsShowAtUserDiv = true;
      this.AtUserName = element.currentTarget.getAttribute("data-username");
      this.AtUserProvice = element.currentTarget.getAttribute("data-provice");
      this.AtUserImg = element.currentTarget.getAttribute("data-userimg");
      this.AtUseruuid = element.currentTarget.getAttribute("data-useruuid");


      //获取点击定位  返回用
      this.ChatContentHistory = element.currentTarget.getAttribute("data-msgid")
      //console.log('ChatContentHistory',element.currentTarget.getAttribute("data-msgid"));  


      //非聊天室
      if (this.current.uuid != 2) {
        var match = /src="(.*?)"/.exec(this.current.srchtml);
        var srcValue = match[1];

        //获取对方@ 信息
        this.AtUserName = this.current.currentName;
        this.AtUserProvice = '中国';
        this.AtUserImg = srcValue;
        this.AtUseruuid = this.current.uuid;
      }


      let atuserMsgs = this.Msglist.filter(
        (r) => r.senduuid == this.AtUseruuid
      );
      this.AtUserSendTime = atuserMsgs[atuserMsgs.length - 1].timeStr;
      this.AtSendMsgCount = atuserMsgs.length;
      const regex = /<[^>]+>/g;
      // 将 HTML 标签替换成空字符串
      this.AtSendLastMsg = atuserMsgs[atuserMsgs.length - 1].msg.replace(
        regex,
        ""
      );

      var x = element.pageX;
      var y = element.pageY;

      let thisAtthisUser = this.$refs.AtthisUser;
      thisAtthisUser.style.top = y + "px";
      thisAtthisUser.style.left = x + "px";



    },
    handleMouseWheel(event) {
      // 处理鼠标滚轮事件
      this.AutoscrollbarFlag = false;
    },
    hasHTMLTags(str) {
      return /<[a-z][\s\S]*>/i.test(str);
    },
    async Printscreen() {

      try {
          this.TipsTime_Info_IsTrue = true
          this.TipsTime_Info('截取中,请稍等...')


          const elem = document.querySelector(".msgleft3msgcontent");

          // 获取容器的实际高度
          const elemHeight = elem.scrollHeight;

          // 创建一个 canvas 元素，大小设置为容器的实际高度
          const canvas = document.createElement("canvas");
          canvas.width = elem.offsetWidth;
          canvas.height = elemHeight;

          // 获取 canvas 的 2D 上下文
          const context = canvas.getContext("2d");

          // 保存容器原有的样式，以便后面恢复
          const elemStyle = elem.style.cssText;

          let imgsrcarr = [];

          // 将容器的样式修改为截图需要的样式
          elem.style.overflow = "visible";
          elem.style.height = `${elemHeight}px`;

          const images = elem.querySelectorAll("img");
          const promises = [];

          images.forEach((image) => {
            let httpsimgurl = image.src.replace("http://", "https://")
            //console.log('image.src',httpsimgurl);
            imgsrcarr.push(httpsimgurl);
            promises.push(
              this.toBase64(httpsimgurl).then((base64) => {
                image.src = base64;
              })
            );
          });

          await Promise.all(promises);

          // 使用 html2canvas 截取容器的内容
          html2canvas(elem).then((canvas) => {
            // 将截图绘制到 canvas 上
            context.drawImage(canvas, 0, 0);

            // 将 canvas 转为图片并下载
            let link = document.createElement("a");
            link.download = this.current.currentName + ".png";
            link.href = canvas.toDataURL("image/png", 1);
            link.click();

            // 恢复容器原有的样式
            elem.style.cssText = elemStyle;
            images.forEach((image, index) => {
              image.src = imgsrcarr[index];
            });

            this.TipsTime_Info_IsTrue = false
            this.Tips("截取成功");
          });
      } catch (error) {
        this.TipsTime_Info_IsTrue = false
        this.Tips("截取失败！");
      }
      
    },
    recordCursorPosition() {
      // 鼠标点击事件，记录光标位置
      const selection = window.getSelection();
      if (selection.rangeCount > 0) {
        const range = selection.getRangeAt(0);
        const rect = range.getBoundingClientRect();

        let height = this.SelectAtOnlineUserList.length * 25;

        this.cursorPosition = { x: rect.left, y: rect.top - height };
      }
    },
    updateHtml() {

      let imgList = this.$refs.editmsg.querySelectorAll("img");
      for (let i = 0; i < imgList.length; i++) {
        let img = imgList[i];

        if (img.className == '') {
          img.alt = "截图";
          // 添加img元素的样式
          img.className = "sendmsgimg";
        }

      }

      this.msg = this.$refs.editmsg.innerHTML;

      //let thismsg = this.$refs.editmsg.innerHTML;

      if (this.msg[this.msg.length - 1] == "@") {

        this.IsShowAtOnline = true;


        this.SelectAtOnlineUserList = this.AtOnlineUserList.sort(
          (a, b) => a.useruuid - b.useruuid
        );

        let thisAtUsers = this.$refs.Atonlineusers;



        setTimeout(() => {
          this.$refs.AtonlineusersSearch_Dom.focus()
        }, 50);

        thisAtUsers.style.top =
          this.cursorPosition.y - 175 + "px";
        thisAtUsers.style.left = this.cursorPosition.x + "px";

      }
    },
    AtonlineusersSearch() {

      if (this.msg[this.msg.length - 1] == "@") {

        this.IsShowAtOnline = true;

        if (this.AtonlineusersSearch_KeyWord == '') {
          this.SelectAtOnlineUserList = this.AtOnlineUserList.sort(
            (a, b) => a.useruuid - b.useruuid
          );
        }
        else {
          const pattern = new RegExp(
            this.AtonlineusersSearch_KeyWord,
            "i"
          );
          this.SelectAtOnlineUserList = this.AtOnlineUserList.filter((r) =>
            pattern.test(r.username)
          ).sort((a, b) => a.useruuid - b.useruuid);
        }

      }

      let thisAtUsers = this.$refs.Atonlineusers;
      thisAtUsers.style.top =
        this.cursorPosition.y - 175 + "px";
      thisAtUsers.style.left = this.cursorPosition.x + "px";

    },
    async Addemoji(
      r //Emoji
    ) {
      let emo = `<img class="dymsg_emoji" src="${r}" alt=""><span style="margin-left: 3px;"></span>`;
      this.$refs.editmsg.innerHTML = this.$refs.editmsg.innerHTML += emo;
      this.msg = this.$refs.editmsg.innerHTML;
      this.ThisEditInputfocus();
    },
    ThisEditInputfocus() {
      //显示焦点
      let el = this.$refs.editmsg;
      let range = document.createRange();
      let sel = window.getSelection();
      range.setStart(
        el.childNodes[el.childNodes.length - 1],
        el.childNodes[el.childNodes.length - 1].length
      );
      range.collapse(true);
      sel.removeAllRanges();
      sel.addRange(range);
      el.focus();
    },
    pushHistory() {
      var state = {
        title: "title",
        url: "#",
      };
      window.history.pushState(state, "title", "#");
    },
    formatTime(time) {
      const now = new Date();
      const target = new Date(time);
      const diff = now.getTime() - target.getTime();
      const hour = target.getHours();
      let minute = target.getMinutes();
      const day = target.getDate();
      const week = target.getDay();

      if (minute < 10) {
        minute = "0" + minute;
      }

      if (diff < 0) {
        // 未来时间
        return target.toLocaleString();
      }

      if (diff < 60 * 1000) {
        // 一分钟内
        return "刚刚";
      }

      if (diff < 60 * 60 * 1000) {
        // 一小时内
        return `${Math.floor(diff / (60 * 1000))}分钟前`;
      }

      if (diff < 24 * 60 * 60 * 1000) {
        // 一天内
        if (hour < 12) {
          return `上午 ${hour}:${minute}`;
        } else if (hour < 18) {
          return `下午 ${hour - 12}:${minute}`;
        } else {
          return `晚上 ${hour - 12}:${minute}`;
        }
      }

      if (diff < 2 * 24 * 60 * 60 * 1000) {
        // 昨天
        return `昨天 ${hour}:${minute}`;
      }

      if (diff < 7 * 24 * 60 * 60 * 1000) {
        // 一周内
        const weeks = ["周日", "周一", "周二", "周三", "周四", "周五", "周六"];
        return `${weeks[week]} ${hour}:${minute}`;
      }

      if (now.getFullYear() === target.getFullYear()) {
        // 同一年
        return `${target.getMonth() + 1}月${day}日 ${hour}:${minute}`;
      } else {
        return `${target.getFullYear()}年${target.getMonth() + 1
          }月${day}日 ${hour}:${minute}`;
      }
    },
    handleResize() {
      //自适应窗体大小
      var screenWidth = window.innerWidth;
      //var height = window.innerHeight;
      this.smallPhone = false;

      //   Basewidth: "62.2%",
      //   Baseheight: "76.8vh",
      if (screenWidth >= 1900) {
        this.Basewidth = "62.2%";
        this.Baseheight = "76.8vh";
        this.IsShowBaseLeftToolsDiv = true;
      } else if (screenWidth >= 1300 && screenWidth < 1900) {
        this.Basewidth = "79%";
        this.Baseheight = "88.8vh";
        this.IsShowBaseLeftToolsDiv = true;
      } else if (screenWidth >= 800 && screenWidth < 1300) {
        this.Basewidth = "92.2%";
        this.Baseheight = "94.8vh";
        this.IsShowBaseLeftToolsDiv = true;
      } else {
        this.IsShowUserListDiv = false;
        this.smallPhone = true;
        // this.Basewidth = "99%";
        // this.Baseheight = "96vh";

        //document.body.style.margin = "6px";
        if (this.ReSizeisFirstClick) {
          this.Basewidth = "97%";
          this.Baseheight = "96vh";
        }
      }
    },
    async handleEvent(event) {
      switch (event.keyCode) {
        case 110:
          if (event.ctrlKey) {
            localStorage.setItem("openpower", 666);
            this.Tips("已解锁超级模式！");
            setTimeout(() => {
              location.reload();
            }, 1400);
          }
          break;
        case 106:
          if (event.ctrlKey) {
            localStorage.setItem("developer", 666);
            this.Tips("已解锁开发者模式！");
            setTimeout(() => {
              location.reload();
            }, 1400);
          }
          break;
        case 37:
          //console.log('ctrl + ←')
          break;
        case 38:
          //console.log('ctrl + ↑')
          break;
        case 39:
          //console.log('ctrl + →')
          break;
        case 40:
          //console.log('ctrl + ↓')
          break;
        case 67:
          if (event.ctrlKey) {
            this.Tips("复制成功!");
          }
          //console.log('ctrl + c')
          break;
        case 83:
          //console.log('ctrl + s')
          break;
        case 86:
          //console.log('ctrl + v')
          break;
        case 13:
          if (event.shiftKey) {
          } else {
            this.handleEnter();
          }
          break;
        case 90:
          break;
      }
    },
    //换行
    insertNewLine: function (event) {
      var range, br, node;
      event.preventDefault();
      range = window.getSelection().getRangeAt(0);
      br = document.createElement("br");
      node = document.createTextNode("\u200b");
      range.deleteContents();
      range.insertNode(br);
      range.collapse(false);
      range.insertNode(node);
      range.setStartAfter(node);
      range.setEndAfter(node);
      window.getSelection().removeAllRanges();
      window.getSelection().addRange(range);
    },
    About() {
      this.IsSetItemShou = false;
      this.IsAbout = true;
    },
    Setting() {
      this.IsAbout = false;
      this.IsSetItemShou = true;
    },
    CloseIsSetItemShouAndAbout() {
      //关闭设置页面 和 关于页面 。。。所有页面关闭

      this.IsShowJournalBox = false;
      this.IsShowFriend = false;
      this.IsAbout = false;
      this.IsSetItemShou = false;
      this.IsShowMy = false;
 
    },
    ShowUserListDiv_Left() {
      // setTimeout(() => {
      // 	this.IsShowUserListDiv_Left = false
      // }, 5000);

      this.IsShowUserListDiv_Right = false;
    },
    ShowUserListDiv_LeftOver(event) {
      if (this.IsShowUserListDiv == false) {
        this.IsShowUserListDiv_Left = true;

        const top = event.clientY;

        const rect = this.$refs.msgleft1_tomin.getBoundingClientRect();
        // 判断是否在当前元素内部
        //if (event.clientX >= rect.left && event.clientX <= rect.right &&
        //	event.clientY >= rect.top && event.clientY <= rect.bottom) {
        //console.log("移动到了该元素",rect.height);
        //	return
        //}
        let basetop = this.$refs.msgborder.offsetTop;
        //this.$refs.msgleft1_tomin.style.top = top - basetop + "px";
        this.$refs.msgleft1_tomin.style.top = (this.$refs.msgleft1.offsetHeight / 2) - 10 + 'px'

        setTimeout(() => {
          this.IsShowUserListDiv_Left = false;
        }, 4000);
      }
    },
    ShowUserListDiv_RightOver(event) {
      // setTimeout(() => {
      // 	this.IsShowUserListDiv_Left = false
      // }, 5000);

      this.IsShowUserListDiv_Right = true;
      const top = event.clientY;
      const rect = this.$refs.tomin.getBoundingClientRect();

      // 判断是否在当前元素内部
      //if (event.clientX >= rect.left && event.clientX <= rect.right &&
      //event.clientY >= rect.top && event.clientY <= rect.bottom) {
      //console.log("移动到了该元素",rect.height);
      //return;
      //}
      let basetop = this.$refs.msgborder.offsetTop;
      // 计算 div 距离顶部的高度
      const distanceFromTop = top - basetop; // 假设距离为鼠标位置减去 div 高度再减去一些间距
      this.$refs.tomin.style.top = `${distanceFromTop}px`;
    },
    ShowAIWords() {
      this.IsShowAIWords = !this.IsShowAIWords;
    },
    ShowRemind() {
      this.IsShowRemind = !this.IsShowRemind;
    },

    ShowLoginDiv(e) {
      this.LoginUserName = e.UserName;
      this.LoginUserImg = e.LoginUserImg;
      this.Loginuuid = e.Loginuuid;
      this.LoginIsVip = e.IsVip;

      localStorage.setItem("cacheLoginuuid", this.Loginuuid);
      localStorage.setItem("cacheLoginUserName", this.LoginUserName);
      localStorage.setItem("cacheLoginUserImg", this.LoginUserImg);


      localStorage.setItem("cacheIsVip", this.LoginIsVip);


      this.IsShowLoginDiv = false;

      this.MyWebSockeSend({
        Msgs: this.LoginUserName,
        userimgurl: this.LoginUserImg,
        useruuid: this.Loginuuid,
        MsgType: 0,
      });
    },
    EditloginUserName() {
      //修改昵称
      this.IsShowLoginDiv = true;

      this.$refs.loginChild.IsShowLoginUserImg = true
      this.$refs.loginChild.IsShowUserNameAndPwd = false


    },
    Resize() {
      //调整窗体大小
      /* height: 720px; */
      /* height: 96vh; */
      /* width: 1180px; */
      /* width: 99%; */
      if (this.ReSizeisFirstClick) {
        this.ReSizeisFirstClick = false;
        if (this.smallPhone) {
          // document.body.style.margin = "6px";
          document.body.style.margin = "0px";
          this.IsShowBaseLeftToolsDiv = false;
          // this.Basewidth = "99%";
          // this.Baseheight = "97vh";
          this.Basewidth = "100%";
          this.Baseheight = "100vh";
          return;
        }
        this.Basewidth = "99%";
        this.Baseheight = "96vh";
      } else {
        // this.Basewidth = '62.2%'
        // this.Baseheight = '76.8vh'

        this.ReSizeisFirstClick = true;
        if (this.smallPhone) {
          this.IsShowBaseLeftToolsDiv = true;
          this.Basewidth = "97%";
          this.Baseheight = "96vh";
          return;
        }
        this.handleResize();
      }
    },
    CloseSetImg() {
      //保存头像
      this.IsSetShowMyImg = true;
      this.IsSetShowAIImg = true;
    },
    GetDDFTime(msglist, currentIndex) {
      if (currentIndex === 0) {
        return 0;
      }

      return;
      const predateStr = msglist[currentIndex - 1].time;
      const dateStr = msglist[currentIndex].time;

      const predate = new Date(predateStr);
      const date = new Date(dateStr);
      /* console.log('predate', predate)
      console.log('date', date) */
      const prevTimestamp = predate.timestamp;
      const currentTimestamp = date.timestamp;
      const timeDiffInMilliseconds = currentTimestamp - prevTimestamp;
      // 如果时间差超过1分钟，则显示时间戳
      return timeDiffInMilliseconds;
      //return timeDiffInMilliseconds >= 5000;
    },
    // 判断当前聊天记录与上一条聊天记录的时间差是否超过1分钟
    shouldDisplayTimestamp(msglist, currentIndex) {
      // 如果是第一条聊天记录，则直接显示时间戳
      if (currentIndex === 0) {
        return true;
      }
      const prevTimestamp = msglist[currentIndex - 1].timestamp;
      const currentTimestamp = msglist[currentIndex].timestamp;
      const timeDiffInMilliseconds = currentTimestamp - prevTimestamp;

      // 如果时间差超过1分钟，则显示时间戳
      return timeDiffInMilliseconds >= 5000;
    },
    GetSendtime() {
      const now = new Date();

      const year = now.getFullYear().toString().padStart(4, "0");
      const month = (now.getMonth() + 1).toString().padStart(2, "0");
      const day = now.getDate().toString().padStart(2, "0");

      const hour = now.getHours().toString().padStart(2, "0");
      const minute = now.getMinutes().toString().padStart(2, "0");
      const second = now.getSeconds().toString().padStart(2, "0");

      const formattedTime = `${year}/${month}/${day} ${hour}:${minute}:${second}`;

      return formattedTime;
    },

    //关闭当前用户
    SigUserColse(user) {
      if (user.uuid == 1) {
        this.Tips("默认项不能删除！");
        return;
      }
      let index = this.Userlist.findIndex((r) => r.uuid == user.uuid);
      this.Userlist.splice(index, 1);
    },
    //浏览器刷新事件
    handleBeforeUnload() {
      // if (this.Msglist != null) {
      //   localStorage.setItem("gptmsgcache", JSON.stringify(this.Msglist));
      // }
      if (this.ReqMessages != null) {
        localStorage.setItem(
          "gptreqmsgcache",
          JSON.stringify(this.ReqMessages)
        );
      }

      if (this.Userlist != null) {
        localStorage.setItem("gptuserlistcache", JSON.stringify(this.Userlist));
      }

      localStorage.setItem("gpttemperaturecache", this.Temperature);
      localStorage.setItem("gptfrequencypenalty", this.FrequencyPenalty);

      localStorage.setItem("setmyImgurlcache", this.SetMyImgUrl);
      localStorage.setItem("setaiImgurlcache", this.SetAIImgUrl);

      // 取消浏览器刷新事件的监听
      //window.removeEventListener('beforeunload', this.handleBeforeUnload);
    },
    //清空全部缓存
    async ClearCacheAll() {
      localStorage.removeItem("gptmsgcache");
      localStorage.removeItem("gptreqmsgcache");
      localStorage.removeItem("gptuserlistcache");
      localStorage.removeItem("gpttemperaturecache");
      localStorage.removeItem("gptfrequencypenalty");
      localStorage.removeItem("setmyImgurlcache");
      localStorage.removeItem("setaiImgurlcache");

      localStorage.removeItem("cacheMsgList_readmsgids");
      this.MsgList_readmsgids = []

      //@ 删除
      localStorage.removeItem('cacheAtMiMsg')
      localStorage.removeItem('cacheAtMiMsgId')
      localStorage.removeItem('cacheIsShowMi')
      this.AtMiMsg = ''
      this.AtMiMsgId = ''
      this.IsShowMi = false


      //删除控制
      localStorage.removeItem("openpower");
      localStorage.removeItem("developer");

      this.SetMyImgUrl = "./tx.jpg";
      this.SetAIImgUrl = "./tx5.jpg";
      this.Temperature = 0.7;
      this.FrequencyPenalty = 0;

      this.ReqMessages = [];
      this.Msglist = [
        {
          msg: `欢迎使用AI助手, 快来向我提问吧 !`,
          ismy: false,
          uuid: '1',
          Iscommon: true,
          isshow: true,
          time: this.GetSendtime(),
        },
        {
          msg: `欢迎来到AI聊天室 !`,
          ismy: false,
          uuid: '2',
          Iscommon: false,
          imgUrl: "ai.png",
          isshow: true,
          tag: "系统",
          provice: "小助手",
          time: this.GetSendtime(),
        },
      ];
      this.Userlist = [
        {
          currentName: "AI小助手",
          uuid: '1',
          IsAI: true,
          Iscommon: true,
          msgCount:1,
          imghtml: `<img style="border-radius: 5px;background-color: #fff !important;"   src="tx5.jpg"
												alt="Alternate Text" />`,
          msgCount:0,
          lastTime:this.GetSendtime(),
          lastMsg:''
        },
        { 
          currentName: `AI聊天室`,
          uuid: '2',
          IsAI: false,
          isRead: true,
          msgCount:1,
          IsMuchChat: true,
          Iscommon: false,
          imghtml: `<img style="border-radius: 5px;background-color: #fff !important;"  src="ai.png"
												alt="Alternate Text" />`,
          msgCount:0,
          lastTime:this.GetSendtime(),
          lastMsg:''
        },
      ];

      await IDBdeleteAllData()

      
      this.Userlist.forEach(async r=>{

        let premsgobj = this.Msglist.filter(a=>a.uuid == r.uuid)[0]

        this.UserList_this_Snapshoot(r,premsgobj.time,premsgobj.msg)
        await IDBadd(premsgobj)
        
      })

      

      this.currentitem(this.Userlist[0], 0);
      //location.reload();
      //this.mounted()
      this.Tips("清除成功！");
    },

    //代码样式
    Codeformat() {
      //代码高亮显示
      this.$nextTick(() => {
        const blocks = this.$el.querySelectorAll("pre code");
        Array.from(blocks).forEach((block) => {
          hljs.highlightBlock(block);
          // 查找同级元素
          const sibling = block.parentNode.querySelectorAll(".copy-btn");

          if (sibling.length < 1) {
            const button = document.createElement("span");
            button.textContent = "";
            button.classList.add("copy-btn");
            block.parentNode.insertBefore(button, block.nextSibling);
            button.addEventListener("click", (event) => {
              // 获取要复制的数据

              //提示
              this.Tips("复制成功！");

              const data = block.textContent.trim();
              //const data = 'Hello, world!'
              this.$copyText(data).then(
                function () {
                  //console.log('Copied:', data)
                },
                function () {
                  //console.error('Copy failed:', data)
                }
              );
            });
          }
        });

        const pres = this.$el.querySelectorAll("pre");
        Array.from(pres).forEach((pre) => {
          //移入事件
          pre.addEventListener("mouseover", (event) => {
            const blocks2 = event.target.querySelectorAll("pre code");
            Array.from(blocks2).forEach((block2) => {
              const copybtns = block2.parentNode.querySelectorAll(".copy-btn");
              Array.from(copybtns).forEach((copybtn) => {
                copybtn.textContent = "copy";
              });
            });
          });

          //移出事件
          pre.addEventListener("mouseleave", (event) => {
            const blocks2 = this.$el.querySelectorAll("pre code");
            Array.from(blocks2).forEach((block2) => {
              const copybtns = block2.parentNode.querySelectorAll(".copy-btn");
              Array.from(copybtns).forEach((copybtn) => {
                copybtn.textContent = "";
              });
            });
          });
        });
      });
    },
    Tips(title) {
      const bubbleWrapper = document.createElement("div");
      bubbleWrapper.classList.add("bubble-wrapper");
      document.body.appendChild(bubbleWrapper);
      const bubble = document.createElement("div");
      bubble.classList.add("bubble");
      bubble.innerHTML = title;
      bubbleWrapper.appendChild(bubble);
      setTimeout(function () {
        bubbleWrapper.remove();
      }, 1400);
    },
    Tips_NonOver(title, time) {
      const flag_bubbleWrapper = document.querySelector('.bubble-wrapper_Tips_NonOver');
      if (flag_bubbleWrapper) {
        flag_bubbleWrapper.remove();
      }
      const bubbleWrapper = document.createElement("div");
      bubbleWrapper.classList.add("bubble-wrapper");
      bubbleWrapper.classList.add("bubble-wrapper_Tips_NonOver");
      document.body.appendChild(bubbleWrapper);
      const bubble = document.createElement("div");
      bubble.classList.add("bubble_NonOrver");
      bubble.classList.add("noStyle");
      bubble.innerHTML = title;
      bubbleWrapper.appendChild(bubble);
      setTimeout(function () {
        bubbleWrapper.remove();
      }, time);
    },
    TipsTime_Alert(title, time) {
      const bubbleWrapper = document.createElement("div");
      bubbleWrapper.classList.add("bubble-wrapper");
      document.body.appendChild(bubbleWrapper);
      const bubble = document.createElement("div");
      bubble.classList.add("bubble_time_alert");
      //bubble.classList.add("noStyle");
      bubble.innerHTML = title;
      bubbleWrapper.appendChild(bubble);
      setTimeout(function () {
        bubbleWrapper.remove();
      }, time);
    },
    TipsTime(title, time) {
      const bubbleWrapper = document.createElement("div");
      bubbleWrapper.classList.add("bubble-wrapper");
      document.body.appendChild(bubbleWrapper);
      const bubble = document.createElement("div");
      bubble.classList.add("bubble");
      bubble.innerHTML = title;
      bubbleWrapper.appendChild(bubble);
      setTimeout(function () {
        bubbleWrapper.remove();
      }, time);
    },
    Copycode(data) {
      this.$copyText(data).then(
        function () {
          //console.log('Copied:', data)
        },
        function () {
          console.error("Copy failed:", data);
        }
      );
    },
    handleMouseenter() {
      this.IsShowCopy = true;
    },
    //隐藏input框  (可以用于全局关闭事件)
    CancelShowInput(event) {
      this.isshowEdit = false;
      this.IsShowbiaoqingDiv = false;
      this.IsShowAtUserDiv = false;
      this.IsShowAtOnline = false;

       
      this.This_QunReadUserList_Index = -1 //查看已读未读列表

      let preconnector = document.querySelector(".connector");
      if (preconnector != null) {
        preconnector.remove();
      }
    },
    //编辑框变化事件
    inputhandleChange(editcurrentName) {
      console.log("(editcurrentName)", editcurrentName);
      this.current.currentName = editcurrentName;
      this.Userlist.filter((r) => r.uuid == this.current.uuid)[0].currentName =
        editcurrentName;
    },
    //编辑名称
    editcurrentNameClick(event) {
      //this.editcurrentName = this.current.currentName;
      // this.$refs.myInput.focus();
      // this.isshowEdit = true;
    },
   async childNewChat(e) {


      this.SwitchContentBox('好友') //关闭其他页面

      const uuid = e.useruuid; //Date.now() + Math.random();



      const index = this.Userlist.findIndex((r) => r.uuid == uuid);
      if (index !== -1) {

        this.activeIndex = index;
        this.currentitem(this.Userlist[index], this.activeIndex);
        return;
      }

      this.Userlist.push({
        currentName: e.username,
        imghtml: `<img style="width: 100%;height: 100%;" src="${e.userimgurl}"/>`,
        Iscommon: false,
        msgCount:1,
        IsAI: false,
        uuid: uuid,
        msgCount:0,
        lastTime:'',
        lastMsg:''
      });

      let premsgobj = {
        msg: "hi，聊聊吧?",
        msgid:(Date.now() + Math.random()).toString(),
        ismy: false,
        uuid: uuid,
        imgUrl: e.userimgurl, 
        Iscommon: false,
        isshow: true,
        time: this.GetSendtime(),
      }
      this.Msglist.push(premsgobj);
      this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == uuid)[0],premsgobj.time,premsgobj.msg)
      await IDBadd(premsgobj)

      

      this.activeIndex = this.Userlist.length - 1;
      this.currentitem(
        this.Userlist[this.Userlist.length - 1],
        this.activeIndex
      );


    },
    //私聊
    async SendSigUserChat(receiverName, receiverUserImg, senduuid) {
      this.IsShowAtUserDiv = false;
      const uuid = senduuid;

      const index = this.Userlist.findIndex(
        (r) => r.currentName == receiverName
      );
      if (index !== -1) {
        this.activeIndex = index;
        this.currentitem(this.Userlist[index], this.activeIndex);
        return;
      }
      this.Userlist.push({
        currentName: receiverName,
        imghtml: `<img style="width: 100%;height: 100%;" src="${receiverUserImg}"/>`,
        Iscommon: false,
        IsAI: false,
        uuid: uuid,
        msgCount:0,
        lastTime:'',
        lastMsg:''
      });

      let  premsgobj = {
        msg: "hi，找我干啥呢?",
        msgid:(Date.now() + Math.random()).toString(),
        ismy: false,
        uuid: uuid,
        imgUrl: receiverUserImg,
        Iscommon: true,
        isshow: true,
        time: this.GetSendtime(),
      }
      this.Msglist.push(premsgobj);
      this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == uuid)[0],premsgobj.time,premsgobj.msg)
      await IDBadd(premsgobj)
      

      this.activeIndex = this.Userlist.length - 1;
      this.currentitem(
        this.Userlist[this.Userlist.length - 1],
        this.activeIndex
      );
    },
    UserList_this_Snapshoot(siguserlist,time,msg)
    {
      siguserlist.msgCount +=1
      siguserlist.lastTime = time//this.formatTime(time)
      siguserlist.lastMsg = this.MsgLastMsg(siguserlist.uuid,msg)
    },
    //新的聊天
    async NewMsg(item) {
      const uuidbase = Date.now() + Math.random();

      let uuid = uuidbase.toString()
      if (item == null) {
        this.Userlist.push({
          currentName: "新的聊天",
          imghtml: "",
          IsAI: true,
          Iscommon: true,
          uuid: uuid,
          msgCount:0,
          lastTime:'',
          lastMsg:''
        });

        // this.Msglist.push({
        //   msg: `欢迎使用AI助手, 快来向我提问吧 !`,
        //   ismy: false,
        //   uuid: uuid,
        //   Iscommon: true,
        //   isshow: true,
        //   time: this.GetSendtime(),
        // });

       await  IDBadd({
          msg: `欢迎使用AI助手, 快来向我提问吧 !`,
          ismy: false,
          uuid: uuid,
          Iscommon: true,
          isshow: true,
          time: this.GetSendtime(),
        })

        
        this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == uuid)[0],this.GetSendtime(),'欢迎使用AI助手, 快来向我提问吧 !')
      } else {
        //预设角色
        this.Userlist.push({
          currentName: item.title,
          imghtml: item.svg,
          Iscommon: false,
          IsAI: true,
          uuid: uuid,
          msgCount:0,
          lastTime:'',
          lastMsg:''
        });
        //前置消息
        this.ReqMessages.push({
          role: "system",
          content: item.keyword,
          uuid: uuid,
          isshow: false,
        });

        //提示词
        // this.Msglist.push({
        //   msg: item.content,
        //   ismy: false,
        //   uuid: uuid,
        //   Iscommon: true,
        //   isshow: true,
        //   time: this.GetSendtime(),
        // });

       await IDBadd({
          msg: item.content,
          ismy: false,
          uuid: uuid,
          Iscommon: true,
          isshow: true,
          time: this.GetSendtime(),
        })

        // this.Msglist.push({
        //   msg: item.keyword,
        //   issucceed: true,
        //   ismy: false,
        //   isloading: false,
        //   uuid: uuid,
        //   isshow: false,
        //   time: this.GetSendtime(),
        // });

        await IDBadd({
          msg: item.keyword,
          issucceed: true,
          ismy: false,
          isloading: false,
          uuid: uuid,
          isshow: false,
          time: this.GetSendtime(),
        })

        this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == uuid)[0],this.GetSendtime(),'欢迎使用AI助手, 快来向我提问吧 !')
      }
      this.activeIndex = this.Userlist.length - 1;
      this.currentitem(
        this.Userlist[this.Userlist.length - 1],
        this.activeIndex
      );

      this.IsShowSelectRole = false;
    },
    //当前对话  当事人
    async currentitem(r, index) {
      this.activeIndex = index;
      this.current.currentName = r.currentName;
      this.current.uuid = r.uuid.toString(); //== 2 ?r.uuid :r.senduuid; //兼容群里私聊
      this.current.IsAI = r.IsAI;
      this.current.IsMuchChat = r.IsMuchChat;
      this.current.Iscommon = r.Iscommon;
      this.current.srchtml = r.imghtml;



      //关闭其他页面
      this.IsShowJournalBox = false;
      this.IsShowFriend = false;
      this.IsAbout = false;
      this.IsSetItemShou = false;
      this.IsShowMy = false;

      //获取当前消息列表

      this.MsgListPageIndex = 0
      this.Msglist = await IDBgetpage(this.current.uuid,this.MsgListPageIndex,this.MsgListPageSize)

      if(this.Msglist.length >= this.MsgListPageSize)
      {
        this.isMouseWheelHandled = true
      }

      this.Msglist = this.Msglist.sort((a, b) => new Date(a.time) - new Date(b.time));
      //console.log('当前消息列表',this.Msglist);
      this.Msglist.forEach((r) => {
        r.timeStr = this.formatTime(r.time);
      }); //刷新时间


      this.OldMsgLenght = this.Msglist.filter((r) => r.uuid == 2).length;
      clearInterval(this.TiShiRedsetInterval);
 
      this.Userlist[index].isRead = true;

      if (this.current.uuid == 2) {
        localStorage.removeItem('cacheIsShowMi')
        this.IsShowMi = false //@你了, 接收
        // this.AtMiMsg = ''
        // this.AtMiMsgId = ''

        //清除提示轨迹
        this.Userlist[index].lastMsg = this.MsgLastMsg(2,this.Msglist[this.Msglist.length - 1].msg)
        

       let thisuser =  this.Userlist.filter(r=>r.uuid == this.current.uuid)
       if(thisuser != null)
       {
        
        try {
          let thismsg = this.Msglist.filter(r=>r.uuid == this.current.uuid)
        
          // let lastmsg = thismsg[thismsg.length-1].msg
          // thisuser[0].lastMsg =  this.MsgLastMsg(thisuser.uuid,lastmsg)
        } catch (error) {
          console.log('curreniti_异常');
        }
       }

      }

      

      clearInterval(this.TiShiRedsetIntervalHash[this.current.uuid]);
      this.TiShiRedsetIntervalHash[this.current.uuid] = null;

      //滚动消息到最底部
      this.AutoscrollbarFlag = true;
      this.$nextTick(() => {

        //定位可见元素 （---- 发送已读通知）
        this.Msg_scrollIsMoveIsRead()

        let container = document.querySelector(".msgleft3msgcontent");
        container.scrollTop = container.scrollHeight;
        setTimeout(() => {
          container.scrollTop = container.scrollHeight;
          // container.scrollTo({
          //   top: container.scrollHeight,
          //   behavior: "smooth", // 可选，平滑滚动
          // });
        }, 40)
      })

      //关闭联系人列表
      this.IsShowFriend = false;

      //清除消息引用
      this.relevanceSendmsgsID = ''
      this.relevanceSendmsgs = ''
      this.relevanceSendUser = ''




      //监听已读消息

      let thisUserNoreadmsg = this.MsgList_readmsgids.filter(r=>r.uuid == this.current.uuid)
      
      thisUserNoreadmsg.forEach(async r=>{
        let thisMsg = this.Msglist.filter(a=>a.msgid == r.msgid)

        //console.log('current——thisMsg',thisMsg);
        // console.log('Msglist',this.Msglist);
        if(thisMsg.length > 0)
        {
          //this.MsgList_readmsgids = this.MsgList_readmsgids.filter(r=>r.uuid != this.current.uuid)
          //console.log('current已读的id',r.msgid);
           thisMsg[0].isreadthismsg = true
           //thisMsg[0].readqunuserlist = thisMsg[0].readqunuserlist
           await IDBupdate(thisMsg[0])
          // let index =  thisUserNoreadmsg.findIndex(a=>a.msgid == r.msgid)
          // if(index !== -1)
          // {
          //   console.log('移除',index);
          //   this.MsgList_readmsgids.splice(index,1)
          // }

          
        }
      })
      
       
      //删除已读记录 flag
      this.MsgList_readmsgids = this.MsgList_readmsgids.filter(r=>r.uuid != this.current.uuid)

      localStorage.setItem('cacheMsgList_readmsgids',JSON.stringify(this.MsgList_readmsgids))
      //console.log('Msglist',this.Msglist);

    },
    RemoveRelevanceMsg() //删除引用
    {
      //清除消息引用
      this.relevanceSendmsgsID = ''
      this.relevanceSendmsgs = ''
      this.relevanceSendUser = ''
    },
    handleEnter() {
      if (this.flagsetInterval != null) {
        return;
      }
      this.sendmsg();
    },
    SendScoketChatSig(msgid) {
      //发送消息
      var sendobj = {
        msgs: this.msg,
        msgid:msgid,
        isreadthismsg:false,
        readqunuserlist:[],
        msgType: 11,
        sendName: this.LoginUserName,
        receiveName: this.current.currentName,
        imgUrl: this.LoginUserImg,
        ismy: true,
        senduuid: this.Loginuuid, //this.current.uuid,
        receiveuuid: this.current.uuid,
        tag: "热心网友",
        time: "",
        relevancemsgid: this.relevanceSendmsgsID,
        relevancemsgs: this.relevanceSendmsgs,
        relevancesenduser: this.relevanceSendUser
      };
      this.MyWebSockeSend(sendobj); //发送消息


    },
   async sendmsg() {

      //return
      this.AutoscrollbarFlag = true //消息允许滚动

      this.msg = this.$refs.editmsg.innerHTML;

      if (this.msg == "") {
        return;
      }



      if (!this.current.IsAI && !this.current.IsMuchChat) { //私聊

        let msgid = (Date.now() + Math.random()).toString()
        this.SendScoketChatSig(msgid);

        let mymsg = {
          msg: this.msg,
          msgid:msgid,
          isreadthismsg:false,
          readqunuserlist:[],
          issucceed: false, //不计入gpt对话当中
          ismy: true,
          isshow: true,
          isloading: false,
          senduuid: this.Loginuuid, //this.current.uuid,
          receiveuuid: this.current.uuid,
          uuid: this.current.uuid,
          time: this.GetSendtime(),
          relevancemsgid: this.relevanceSendmsgsID,
          relevancemsgs: this.relevanceSendmsgs,
          relevancesenduser: this.relevanceSendUser
        };
        this.Chat_TimeDiff(mymsg)

        this.Msglist.push(mymsg);
        this.$refs.editmsg.innerHTML = "";
        this.msg = "";

        //清除消息引用
        this.relevanceSendmsgsID = ''
        this.relevanceSendmsgs = ''
        this.relevanceSendUser = ''

        this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == this.current.uuid)[0],mymsg.time,mymsg.msg)
        await IDBadd(mymsg)
        //this.Userlist.filter(r=>r.uuid == this.current.uuid)[0].msgCount +=1
        
        return;
      }

      if (this.smallPhone) {
        if (this.msg == "我不要封锁") {
          localStorage.setItem("openpower", 666);
          this.Tips("已解锁超级模式！");
          this.msg = "";
          setTimeout(() => {
            location.reload();
          }, 1400);
          return;
        }
      }

      //假数据
      if (this.msg.includes("gpt几")) {
        this.Msglist.push({
          msg: this.msg,
          ismy: true,
          isshow: true,
          uuid: this.current.uuid,
          time: this.GetSendtime(),
        });
        this.msg = "";

        setTimeout(() => {
          this.Msglist.push({
            msg: "我是基于GPT4大模型!",
            ismy: false,
            isshow: true,
            uuid: this.current.uuid,
            time: this.GetSendtime(),
          });
        }, 1200);

        return;
      }


      if (!this.current.IsAI && this.current.IsMuchChat) {
        await this.sendWebscoketMsg(); //群聊
        this.$refs.editmsg.innerHTML = "";
        this.msg = "";
        return;
      }


      //GPT 请求要放在 私聊和群聊之后 （私聊和群聊的信息，不作为gpt请求上下文）


      //console.log('this.relevanceSendmsgs != ',this.relevanceSendmsgs != '',this.relevanceSendmsgs);
      this.ReqMessages.push({
        role: "user",
        content: this.relevanceSendmsgs != '' ? this.relevanceSendmsgs + ' 根据前面的内容回答我下面说的话：' + this.msg : this.msg,
        isshow: true,
        uuid: this.current.uuid,
      });



      let mymsg = {
        msg: this.msg,
        msgid:(Date.now() + Math.random()).toString(),
        issucceed: true,
        ismy: true,
        isshow: true,
        isloading: false,
        uuid: this.current.uuid,
        time: this.GetSendtime(),
        relevancemsgid: this.relevanceSendmsgsID,
        relevancemsgs: this.relevanceSendmsgs,
        relevancesenduser: this.relevanceSendUser
      };

      let my_Msglist = this.Msglist.filter(
        (r) => r.ismy && r.uuid == this.current.uuid
      );

      if (my_Msglist.length == 0) {
        mymsg.timeDiff = true;
      }

      if (my_Msglist[my_Msglist.length - 1]) {
        const predate = new Date(my_Msglist[my_Msglist.length - 1].time);
        const date = new Date(mymsg.time);
        const prevTimestamp = predate.getTime();
        const currentTimestamp = date.getTime();
        const timeDiffInMilliseconds = currentTimestamp - prevTimestamp;

        let second = timeDiffInMilliseconds / 1000;

        if (this.flagsetInterval != null) {
          return;
        }

        if (
          this.Msglist[this.Msglist.length - 1].msg ==
          `<span style="color: #FFA500;">非常抱歉，我正在处理大量询问，您的访问可能会稍有延迟，请您稍候片刻再试!!! 😭😭😭</span>`
        ) {
          if (second < 10) {
            this.multinum_err = 0;
            this.TipsTime(`抱歉，当前网络拥堵${10}秒后,将自动重试`, 1000);
            this.flagsetInterval = setInterval(() => {
              this.TipsTime(
                `抱歉，当前网络拥堵${9 - this.multinum_err}秒后,将自动重试`,
                1000
              );
              this.multinum_err++;
              if (this.multinum_err == 10) {
                clearInterval(this.flagsetInterval);
                this.flagsetInterval = null;
                this.sendmsg();
              }
            }, 1000);
            return;
          }
        }

        if (second < 2) {
          this.Tips(`发送太频繁了${2 - second}秒后重试`);
          return;
        }
        if (second > 15) {
          mymsg.timeDiff = true;
        }
      }

      this.Msglist.push(mymsg);

      this.premsg = this.msg;

      this.$refs.editmsg.innerHTML = "";
      this.msg = "";

      //清除消息引用
      this.relevanceSendmsgsID = ''
      this.relevanceSendmsgs = ''
      this.relevanceSendUser = ''

      this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == this.current.uuid)[0],mymsg.time,mymsg.msg)
      await IDBadd(mymsg)
      
       

       
      await this.getmsg(false);
    },

    //IM 私聊 群聊专用
    Chat_TimeDiff(mymsg) {
      let my_Msglist = this.Msglist.filter(
        (r) => r.uuid == mymsg.uuid
      );

      if (my_Msglist.length == 0) {
        mymsg.timeDiff = true;
      }

      if (my_Msglist[my_Msglist.length - 1]) {
        const predate = new Date(my_Msglist[my_Msglist.length - 1].time);
        const date = new Date(mymsg.time);
        const prevTimestamp = predate.getTime();
        const currentTimestamp = date.getTime();
        const timeDiffInMilliseconds = currentTimestamp - prevTimestamp;

        let second = timeDiffInMilliseconds / 1000;

        if (second > 60) {
          mymsg.timeDiff = true;
        }
        else {
          mymsg.timeDiff = false
        }
      }
    },

    addRecord() {
      axios({
        method: "get",
        url: "http://47.236.19.239:5000/api/chat/AddRecord",
      })
        .then((res) => { })
        .catch((err) => {
          console.log(err);
        });
    },
    PushZanZhu(requestId) {
    //   let zzmsg = {
    //     msg: `<div style="display: flex;font-size: 14px;align-items: center;flex-wrap: wrap;margin: 8px 0;">
		// 	<div style="margin-right: 8px;">
		// 		<h4 style="padding:0;margin: 0;">温馨提示:</h4>
		// 		<p>
    //       Hi! 
    //       近期，我在AI助手产品的开发和维护方面投入了大量的时间和精力，免费提供给大家使用，但是服务器成本，OpenAIKey的费用等也是一笔不小的开销，
    //       为了保证产品的长久运行和稳定性，
    //       我们需要向您提出一个小小的请求。
    //       如果您在使用过程中觉得给你带来方便和不错的体验，并且您愿意为我们提供支持，我们会非常感激！🥰
    //       </p>
		// 	</div>
    //   <div style="display: flex;flex-wrap: wrap;">
    //     <img class="zhanzhu" style="width: 140px;height: 170px;border-radius: 6px;margin-right: 8px;" src="/wx.jpg" alt=""/>
    //     <img class="zhanzhu" style="width: 140px;height: 140px;border-radius: 6px;margin-right: 8px;" src="/bx.jpg" alt=""/>
    //   </div>
		// </div>
		// 					`,
    //     ismy: false,
    //     isloading: false,
    //     requestId: requestId,
    //     issucceed: false,
    //     isshow: true,
    //     tag: "AI助手",
    //     provice: "小呆", //扩展-聊天室字段
    //     uuid: this.current.uuid,
    //     time: this.GetSendtime(),
    //   };
    //   this.Msglist.push(zzmsg);
    },
    getRole() {
      // let reqrolemsg = this.ReqMessages.filter((r) => r.uuid == this.current.uuid);
      // reqrolemsg.push({
      //   role: "user",
      //   content: '使用四到五个字直接返回上面对话的简要主题，不要解释、不要标点符号、不要语气词、不要多余文本，请注意只要四到五个字，如果没有主题，请直接返回“闲聊”',
      //   //content:`Summarize the following text into 4 or 5 words, making it easy to read and comprehend. The summary should be concise, clear, and capture the main points of the text. Avoid using complex sentence structures or technical jargon. Respond in Chinese. Please begin by editing the following text: `
      //   //uuid: r.uuid,
      // });

      let reqrolemsg = [];
      this.Msglist.filter(
        (r) => r.uuid == this.current.uuid && r.issucceed == true
      ).forEach((r) => {
        let req = {
          role: r.ismy ? "user" : "assistant",
          content: r.msg.replace(/<\/?[^>]+(>|$)|&nbsp;/g, ""),
        };
        reqrolemsg.push(req);
      });
      reqrolemsg.push({
        role: "user",
        content:
          "使用四到五个字直接返回上面对话的简要主题，不要解释、不要标点符号、不要语气词、不要多余文本，请注意只要四到五个字，如果没有主题，请直接返回“闲聊”",
      });

      this.sendChatRequest(
        reqrolemsg,
        this.Temperature,
        this.FrequencyPenalty,
        (progressEvent) => { },
        (response) => {
          let thisuser = this.Userlist.filter(
            (r) => r.uuid == this.current.uuid
          );
          if (thisuser.length > 0) {
            if (
              response.data !=
              `<span style="color: #FFA500;">非常抱歉，我正在处理大量询问，您的访问可能会稍有延迟，请您稍候片刻再试!!! 😭😭😭</span>`
            ) {
              let result = response.data.replace(/[\p{P}]/gu, "");
              thisuser[0].currentName = result;
              this.current.currentName = result;
            }
          }
          //console.log('getRoleresponse', response);
        },
        (error) => { }
      );
    },
   async  sendWebscoketMsg() {
      //发生群聊
      // var reg = /@([a-zA-Z]+)/g;
      // this.msg = this.msg.replace(
      //   reg,
      //   `<span data-useruuid='${this.AtUseruuid}'   data-username='${this.AtUserName}' data-userimg='${this.AtUserImg}' data-provice='${this.AtUserProvice}' class="Atmsg" style="color: #00a4ff;">@$1</span>`
      // );
      let premsg = this.msg;
      // this.msg = premsg.replace(
      //   `@${this.AtUserName}`,
      //   `<span data-useruuid='${this.AtUseruuid}'   data-username='${this.AtUserName}' data-userimg='${this.AtUserImg}' data-provice='${this.AtUserProvice}' class="Atmsg" style="color: #00a4ff;">@${this.AtUserName}</span>`
      // );


      let msgid = (Date.now() + Math.random()).toString()

      var sendobj = {
        msgs: this.msg,
        msgid:msgid,
        isreadthismsg:false,
        readqunuserlist:[],
        msgType: 9,
        sendName: this.LoginUserName,
        receiveName: this.current.currentName,
        imgUrl: this.LoginUserImg,
        senduuid: this.Loginuuid, //this.current.uuid,
        receiveuuid: this.current.uuid,
        ismy: true,
        tag: "热心网友",
        time: "",
        relevancemsgid: this.relevanceSendmsgsID,
        relevancemsgs: this.relevanceSendmsgs,
        relevancesenduser: this.relevanceSendUser,
        isvip:this.LoginIsVip
      };

      //console.log('sendobj', sendobj);

      this.MyWebSockeSend(sendobj); //发送消息

      let mymsg = {
        msg: this.msg.replace(/&lt;/g, "<").replace(/&gt;/g, ">"),
        msgid:msgid,
        isreadthismsg:false,
        readqunuserlist:[],
        issucceed: true,
        ismy: true,
        isshow: true,
        isloading: false,
        uuid: this.current.uuid,
        sendName: sendobj.sendName,
        senduuid: this.Loginuuid, //this.current.uuid,
        receiveuuid: this.current.uuid,
        ispublicchatroom: true, //聊天室聊天
        time: this.GetSendtime(),
        relevancemsgid: this.relevanceSendmsgsID,
        relevancemsgs: this.relevanceSendmsgs,
        relevancesenduser: this.relevanceSendUser
      };

      this.Chat_TimeDiff(mymsg)


      if (this.msg.includes("@ai") || this.msg.includes("@AI") || this.relevanceSendUser == 'System' || this.relevanceSendUser == 'AI助手') {
        
        this.Msglist.push(mymsg);

        //新增消息记录
        this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == this.current.uuid)[0],mymsg.time,mymsg.msg)
        await IDBadd(mymsg)
        


        //console.log('this.msg',this.msg);
        let reqmsg = this.relevanceSendmsgs != '' ? this.relevanceSendmsgs + ' 根据前面的内容回答我下面说的话：' + mymsg.msg : mymsg.msg

        //群聊AI对话 上下文
        this.ReqMessages.push({
          role: "user",
          content: reqmsg.replace(/@AI小助手/g, ''), //去除不需要的内容
          isshow: true,
          uuid: this.current.uuid,
        });

        await this.getmsg(true);
      } else {
        mymsg.ispublicchatroom = false;
        
        
        this.Msglist.push(mymsg);

        //新增消息记录
        this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == this.current.uuid)[0],mymsg.time,mymsg.msg)
        await IDBadd(mymsg)
        

      }

      this.OldMsgLenght = this.Msglist.filter((r) => r.uuid == 2).length;
      this.msg = "";

      //清除消息引用
      this.relevanceSendmsgsID = ''
      this.relevanceSendmsgs = ''
      this.relevanceSendUser = ''
    },
    SystemAlert(userlistindex, actionindex, msg, myicon) {
      // 检查浏览器是否支持通知
      if ("Notification" in window) {

        // 请求用户授权
        Notification.requestPermission().then((permission) => {
          if (permission === "granted") {

            // 如果已经存在通知，则先关闭旧通知
            if (this.notification) {
              this.notification.close();
            }

            // 创建通知
            this.notification = new Notification("消息通知", { body: msg, icon: myicon });

            // 点击通知时的行为
            this.notification.onclick = () => {
              this.currentitem(this.Userlist[userlistindex], actionindex);

              window.focus(); //唤醒浏览器
              // 关闭通知
              this.notification.close();
              console.log("通知被点击了");
            };

            // 关闭通知时的行为
            this.notification.onclose = function () {
              console.log("通知被关闭了");
            };
          }
        });
      }
    },
    //获取scoket信息
    async getsocketData(e) {
      if (this.Userlist.filter((r) => r.uuid == 2).length == 0) {
        //解决缓存不显示
        this.Userlist.push({
          currentName: "AI聊天室",
          uuid: 2,
          IsAI: false,
          IsMuchChat: true,
          isRead: true,
          Iscommon: false,
          imghtml: `<img style="border-radius: 5px;background-color: #fff !important;"  src="ai.png"
												alt="Alternate Text" />`,
        });

        this.Msglist.push({
          msg: `欢迎来到AI聊天室 !`,
          ismy: false,
          uuid: 2,
          Iscommon: false,
          isshow: true,
          tag: "系统",
          imgUrl: "ai.png",
          provice: "小助手",
          time: this.GetSendtime(),
        });
      }

      var objmsg = JSON.parse(e.detail.data);


      
      

      if (objmsg.msgType == 12) {
        this.CommentInfos.push(objmsg);

        this.CommentInfos = this.CommentInfos.sort(
          (a, b) => new Date(b.time) - new Date(a.time)
        );
        // console.log("this.CommentInfos", this.CommentInfos);
      }

      //在线列表
      if (objmsg.msgType == 99) {
        objmsg.Data.push({
          username: "全体成员",
          userimgurl: "http://file.xiaoshagua.top/chathistory/7fa0440bd7d5409781d18ec24d5bff11.jpg",
          provice: "火星",
          useruuid: -999,
        });

        objmsg.Data.push({
          username: "AI小助手",
          userimgurl: "ai.png",
          provice: "火星",
          useruuid: 2,
        });

        // objmsg.Data.forEach((r) => {
        //   r.username =
        //     r.username == localStorage.getItem("cacheLoginUserName")
        //       ? "我"
        //       : r.username;
        // });
        //console.log("在线列表", objmsg.Data);
        let thisuuid = localStorage.getItem("cacheLoginuuid")

        this.AtOnlineUserList = objmsg.Data.filter(r => r.useruuid != thisuuid)
        this.SelectAtOnlineUserList = this.AtOnlineUserList;
      }

      if (objmsg.msgType === 10) {
        this.OnlineCount = objmsg.OnliceCount;
        this.LoginUserProvice = objmsg.LoginUserProvice;
        return;
      }

      let receivemsg = {
        msg:
          objmsg.msgs == undefined
            ? ""
            : objmsg.msgs.replace(/&lt;/g, "<").replace(/&gt;/g, ">"),
        msgid: objmsg.msgid,
        isvip:objmsg.isvip,
        isreadthismsg:objmsg.isreadthismsg,
        issucceed: true,
        ismy: false,
        isshow: true,
        isloading: false,
        imgUrl: objmsg.imgUrl, //群组私聊使用
        sendName: objmsg.sendName,
        uuid: objmsg.receiveuuid == 2 ? objmsg.receiveuuid : objmsg.senduuid, // 兼容uuid
        senduuid: objmsg.senduuid,
        receiveuuid: objmsg.receiveuuid,
        tag: objmsg.tag,
        requestId: objmsg.requestId,
        provice: objmsg.provice, //扩展-聊天室字段
        time: objmsg.time,//this.GetSendtime(),
        relevancemsgid: objmsg.relevancemsgid,
        relevancemsgs: objmsg.relevancemsgs,
        relevancesenduser: objmsg.relevancesenduser
      };



       

      //console.log('服务的转发',objmsg);
      if (objmsg.msgType == 13) {  //消息已读

        let readmsgid = objmsg.msgid

        if(this.Msglist.length == 0)
        {
          return
        }

        //console.log('readmsgid',receivemsg);

        if(this.MsgList_readmsgids.findIndex(r=>r.msgid == readmsgid) == -1)
        {
          //发送者与接收者不同 同一个频道
          this.MsgList_readmsgids.push(receivemsg)
          localStorage.setItem('cacheMsgList_readmsgids',JSON.stringify(this.MsgList_readmsgids))
        }
 

        let thisMsg = this.Msglist.filter(r=>r.msgid == readmsgid)

           
          
          // console.log('Msglist',this.Msglist);
          if(thisMsg.length > 0)
          {
            setTimeout(async () => {
              
              let readqunuser = {
                username:receivemsg.sendName,
                provice: '火星',//receivemsg.provice,
                userimgurl:receivemsg.imgUrl,
                useruuid:receivemsg.senduuid
              }

            if(thisMsg[0].readqunuserlist != null && thisMsg[0].readqunuserlist.findIndex(r=>r.useruuid == receivemsg.senduuid) == -1)
            {
              //console.log('thisMsg',thisMsg);
              //console.log('已读的id',readmsgid,receivemsg);
              thisMsg[0].readqunuserlist.push(readqunuser)
              thisMsg[0].isreadthismsg = true
              await IDBupdate(thisMsg[0])
              //console.log('群',readqunuser,thisMsg[0]);
            }
           
            }, 10);
          }

        return
        }


      //console.log('this.Msglist.findIndex(r=>r.msgid == receivemsg.msgid)',this.Msglist.findIndex(r=>r.msgid == receivemsg.msgid));
      if(this.Msglist.findIndex(r=>r.msgid == receivemsg.msgid) !== -1)
      {
        //console.log('重复消息');
        return
      }

      



      this.Chat_TimeDiff(receivemsg)

      //私聊
      if (objmsg.msgType === 11) {


        //console.log('私聊objmsg',objmsg);
        //权限控制 Doubt
        if (objmsg.sendName == "Doubt" || objmsg.sendName == "doubt") {
          if (objmsg.msgs == '解锁权限') {
            this.TipsTime('管理员已为你开启权限，请稍等！', 5000)

            localStorage.setItem('Lock_Power', true)

            setTimeout(() => {
              location.reload()
            }, 3000)

          }
          if (objmsg.msgs == '关闭权限') {
            this.TipsTime('管理员已关闭你的权限', 5000)

            localStorage.setItem('cacheSelectMybackground', 'none')
            localStorage.setItem('cacheSelectMyFontfamily', 'KaiTi')

            localStorage.removeItem('Lock_Power')

            setTimeout(() => {
              location.reload()
            }, 3000)

          }
        }


        let index = this.Userlist.findIndex((r) => r.uuid == objmsg.senduuid);
        if (index === -1) {
          //当前联系人列表没有这个人时
          this.Userlist.push({
            currentName: objmsg.sendName,
            imghtml: `<img style="width: 100%;height: 100%;" src="${objmsg.imgUrl}"/>`,
            Iscommon: false,
            IsAI:false,
            isRead: true, //是否读取
            uuid: receivemsg.uuid, //私聊为senduuid
            msgCount:0,
            lastTime:this.GetSendtime(),
            lastMsg:''
          });
        }

        if (objmsg.sendName != this.current.currentName) {
          let index2 = this.Userlist.findIndex(
            (r) => r.uuid == receivemsg.uuid
          );
          this.TiShiRed(index2, receivemsg.uuid);
        }

        this.Msglist.push(receivemsg);
        this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == receivemsg.uuid)[0],receivemsg.time,receivemsg.msg)
        await IDBadd(receivemsg)
        //console.log('this.Userlist.filter(r=>r.uuid == receivemsg.receiveuuid)',this.Userlist.filter(r=>r.uuid == receivemsg.uuid));
        

        //弹框提示
        const alertindex = this.Userlist.findIndex(
          (r) => r.uuid == receivemsg.uuid
        );
        if (alertindex !== -1) {
          this.SystemAlert(alertindex, alertindex, receivemsg.msg.replace(/<[^>]*>/g, ''), receivemsg.imgUrl)
        }


        if(this.current.uuid == receivemsg.senduuid)
        {
          console.log('双方都在对方聊天框内1',receivemsg.msgid);
          //双方都在对方聊天框内
          this.sendReadMsg(receivemsg.msgid)

          console.log('双方都在对方聊天框内2',receivemsg.msgid);
          //alert(6)

        }

        return;
      }

      //群聊
      if (objmsg.msgType === 9) {

        
       
        let loginuuid = localStorage.getItem("cacheLoginuuid");
        let loginusername = localStorage.getItem("cacheLoginUserName");
        if (receivemsg.msg.includes(`${loginuuid}`) || receivemsg.msg.includes(`全体成员`)) {
          this.AtMiMsg = `${receivemsg.sendName}@提到了我`
          this.AtMiMsgId = receivemsg.msgid
          this.IsShowMi = true

          localStorage.setItem('cacheAtMiMsg', this.AtMiMsg)
          localStorage.setItem('cacheAtMiMsgId', this.AtMiMsgId)
          localStorage.setItem('cacheIsShowMi', this.IsShowMi)

          this.SystemAlert(1, 1, receivemsg.msg.replace(/<[^>]*>/g, ''), receivemsg.imgUrl)
        }

        if (receivemsg.relevancesenduser != undefined && receivemsg.relevancesenduser != '') //当是回复时候的时候
        {
          if (this.LoginUserName == receivemsg.relevancesenduser) //回复的人是我
          {
            this.AtMiMsg = `${receivemsg.sendName}回复了我`
            this.AtMiMsgId = receivemsg.msgid
            this.IsShowMi = true

            localStorage.setItem('cacheAtMiMsg', this.AtMiMsg)
            localStorage.setItem('cacheAtMiMsgId', this.AtMiMsgId)
            localStorage.setItem('cacheIsShowMi', this.IsShowMi)

            this.SystemAlert(1, 1, '回复了我：' + receivemsg.msg.replace(/<[^>]*>/g, ''), receivemsg.imgUrl)
          }
        }

        

        if (objmsg.requestId == null) {


                 //群里判断 receiveName
          if (objmsg.receiveName != this.current.currentName) {
            let index2 = this.Userlist.findIndex(
              (r) => r.uuid == receivemsg.uuid
            );
            this.TiShiRed(index2, receivemsg.uuid);
          }


          //发送的普通消息
          this.Msglist.push(receivemsg);

          this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == 2)[0],receivemsg.time,receivemsg.msg)
          await IDBadd(receivemsg)
           


          this.AutoscrollbarFlag = true;
        } else {
          const index = this.Msglist.findIndex(
            (r) => r.requestId == objmsg.requestId
          );
          if (index !== -1) {
            this.Msglist.splice(index, 1, receivemsg);
          } else {

            if (objmsg.receiveName != this.current.currentName) {
              let index2 = this.Userlist.findIndex(
                (r) => r.uuid == receivemsg.uuid
              );
              this.TiShiRed(index2, receivemsg.uuid);
            }


            this.Msglist.push(receivemsg);

            this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == 2)[0],receivemsg.time,receivemsg.msg)
            await IDBadd(receivemsg)
            

           
          }
        }

        
      }

      // let receivemsg = {
      //   msg: objmsg.msgs.replace(/&lt;/g, '<').replace(/&gt;/g, '>'),
      //   issucceed: true,
      //   ismy: false,
      //   isshow: true,
      //   isloading: false,
      //   imgUrl: objmsg.imgUrl, //群组私聊使用
      //   sendName:objmsg.sendName,
      //   uuid: 2,
      //   tag: objmsg.tag,
      //   requestId: objmsg.requestId,
      //   provice: objmsg.provice, //扩展-聊天室字段
      //   time: this.GetSendtime(),
      // };

      // clearInterval(this.TiShiRedsetInterval)

      // if (this.current.uuid == 2) {
      //   this.OldMsgLenght = this.Msglist.filter(r => r.uuid == 2).length
      //   clearInterval(this.TiShiRedsetInterval)
      // }
      // else {
      //   this.TiShiRed()
      // }
    },
    TiShiRed(index2, uuid) {
      if (index2 !== -1) {
        this.Userlist[index2].isRead = false;

        if (this.TiShiRedsetIntervalHash[uuid] == null) {
          let flag = true;
          this.TiShiRedsetIntervalHash[uuid] = setInterval(() => {
            if (flag) {
              this.Userlist[index2].isRead = true;
              flag = false;
            } else {
              this.Userlist[index2].isRead = false;
              flag = true;
            }
          }, 1000);
        }
      }
    },
    compressionImage(file, thisquality) {
      return new Promise((resolve, reject) => {
        // eslint-disable-next-line no-new
        new ImageCompressor({
          file: file,
          quality: thisquality,
          maxWidth: 0,
          maxHeight: 0,
          redressOrientation: false,

          // 压缩前回调
          beforeCompress: function (result) {
            // console.log('压缩之前图片尺寸大小: ', result.size)
            // console.log('mime 类型: ', result.type)
          },

          success: function (result) {
            // console.log('压缩之后图片尺寸大小: ', result.size)
            // console.log('mime 类型: ', result.type)
            // console.log('实际压缩率： ', ((file.size - result.size) / file.size * 100).toFixed(2) + '%')
            resolve(result);
          },
          error(e) {
            reject(e);
          },
        });
      });
    },
    CanvascompressImage(file, thisquality, maxWidth, maxHeight) {
      return new Promise((resolve, reject) => {
        const img = new Image();
        img.onload = () => {
          const canvas = document.createElement("canvas");
          let width = img.width;
          let height = img.height;

          if (width > maxWidth) {
            height *= maxWidth / width;
            width = maxWidth;
          }

          if (height > maxHeight) {
            width *= maxHeight / height;
            height = maxHeight;
          }

          canvas.width = width;
          canvas.height = height;

          const ctx = canvas.getContext("2d");
          ctx.drawImage(img, 0, 0, width, height);

          canvas.toBlob(
            (blob) => {
              resolve(blob);
            },
            file.type,
            thisquality // 压缩质量，可以根据需要调整
          );
        };

        img.onerror = reject;

        img.src = URL.createObjectURL(file);
      });
    },

    // async SetingLoginUserImg() {
    //   //修改我的头像
    //   const childComponent = this.$refs.loginChild;
    //   childComponent.SetImg();
    // },
    SetChildLoginUserImg(e) {
      this.LoginUserImg = e;
      localStorage.setItem("cacheLoginUserImg", this.LoginUserImg);
    },

    SendFile() {
      this.$refs.inputfile.dispatchEvent(new MouseEvent("click"));
    },
    async handleFileChange(e) {
      //let file = e.target.files;

      let file = e.target.files[0];


      let prefilename = file.name
      let fileSizeInKB = Math.round(file.size / 1024);
      console.log('默认file', file);


      if (fileSizeInKB > 500 && fileSizeInKB <= 1000) {
        file = await this.CanvascompressImage(
          e.target.files[0],
          0.7,
          1920,
          1080
        );
        fileSizeInKB = Math.round(file.size / 1024);
        //console.log('压缩后size1', fileSizeInKB);
      } else if (fileSizeInKB > 1000 && fileSizeInKB <= 1500) {
        file = await this.CanvascompressImage(
          e.target.files[0],
          0.6,
          1920,
          1080
        );
        fileSizeInKB = Math.round(file.size / 1024);
        //console.log('压缩后size2', fileSizeInKB);
      } else if (fileSizeInKB > 1500) {
        file = await this.CanvascompressImage(
          e.target.files[0],
          0.5,
          1920,
          1080
        );
        fileSizeInKB = Math.round(file.size / 1024);
        //console.log('压缩后size3', fileSizeInKB);
      }

      console.log('文件');
      const formData = new FormData();
      formData.append('foldername', 'chathistory');
      formData.append('filename', prefilename);
      formData.append("file", file);
      axios.post(this.$BaseUrl + '/api/File/Upload', formData).then(
        res => {
          if (res.data.code == 200) {
            console.log(res.data.data)


            let mymsg = {
              msg: `<img crossorigin="anonymous" class="sendmsgimg" src="${res.data.data}" alt="">`,
              issucceed: true,
              ismy: true,
              isshow: true,
              isloading: false,
              uuid: this.current.uuid,
              ispublicchatroom: true, //聊天室聊天
              time: this.GetSendtime(),
            };
            this.$refs.editmsg.innerHTML += mymsg.msg;
            this.msg = this.$refs.editmsg.innerHTML;

          } else {
            console.log(res.data)
          }
        })


      return
      //base64 格式 （弃用）
      let reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = () => {
        let dataURL = reader.result;
        //console.log('ysfile', dataURL);
        let mymsg = {
          msg: `<img crossorigin="anonymous" class="sendmsgimg" src="${dataURL}" alt="">`,
          issucceed: true,
          ismy: true,
          isshow: true,
          isloading: false,
          uuid: this.current.uuid,
          ispublicchatroom: true, //聊天室聊天
          time: this.GetSendtime(),
        };
        this.$refs.editmsg.innerHTML += mymsg.msg;
        this.msg = this.$refs.editmsg.innerHTML;
      };


      // axios({
      //   method: 'post',
      //   //url: 'http://localhost:7000/api/File/Upload',
      //   url: 'https://api.xiaoshagua.top/api/File/Upload',
      //   data: file
      // })
      //   .then(async res => {
      //     let mymsg = {
      //       msg: `<img  crossorigin="anonymous" class="sendmsgimg" src="${res.data.data}" alt="">`,
      //       issucceed: true,
      //       ismy: true,
      //       isshow: true,
      //       isloading: false,
      //       uuid: this.current.uuid,
      //       ispublicchatroom: true, //聊天室聊天
      //       time: this.GetSendtime(),
      //     };
      //     this.$refs.editmsg.innerHTML += mymsg.msg
      //     this.msg = this.$refs.editmsg.innerHTML
      //   }).catch(err => {
      //   })
    },
    toBase64(url) {
      return new Promise(function (resolve, reject) {
        var xhr = new XMLHttpRequest();
        xhr.onload = function () {
          var reader = new FileReader();
          reader.onloadend = function () {
            resolve(reader.result);
          };
          reader.readAsDataURL(xhr.response);
        };
        xhr.onerror = reject;
        xhr.open("GET", url);
        xhr.responseType = "blob";
        xhr.send();
      });
    },
    async getmsg(ischatroom) {
      let rolediffnum = this.ReqMessages.filter(
        (r) => r.uuid == this.current.uuid
      ).length;
      if (
        rolediffnum == 3 &&
        (this.current.currentName == "新的聊天" ||
          this.current.currentName == "AI小助手")
      ) {
        this.getRole();
      }

      if (this.IsOpenBothwayContext) {
        this.AllReqMessages = [];
        this.Msglist.filter(
          (r) => r.uuid == this.current.uuid && r.issucceed == true
        ).forEach((r) => {
          let req = {
            role: r.ismy ? "user" : "assistant",
            content: r.msg,
            uuid: r.uuid,
          };
          this.AllReqMessages.push(req);
        });
        //console.log('this.AllReqMessages', this.AllReqMessages)

        if (this.AllReqMessages.length > 120) {
          this.Tips("双向上下文内容太多了,新建对话继续吧!");
          return;
        }
      }

      // 生成一个唯一标识符
      const requestId = Math.random().toString(36).substr(2);
      let thisrequuid = this.current.uuid;
      //console.log('requestId', requestId)
      this.Msglist.push({
        msg: `<div class="loader">
					<span></span>
					<span></span>
					<span></span>
					</div>`,
        msgid:(Date.now() + Math.random()).toString(),
        ismy: false,
        isloading: true,
        isshow: true,
        imgUrl: "ai.png",
        tag: "AI助手",
        provice: "小呆", //扩展-聊天室字段
        requestId: requestId,
        uuid: thisrequuid,
        time: this.GetSendtime(),
      });



      var thisReqmessage = this.ReqMessages.filter(
        (r) => r.uuid == this.current.uuid
      );


      const self = this; // 将Vue实例的this存储在变量中

      if (this.IsOpenBothwayContext) {
        this.AllReqMessages.forEach((r) => {
          r.content = r.content.replace(/<\/?[^>]+(>|$)|&nbsp;/g, "");
        });
      } else {
        thisReqmessage.forEach((r) => {
          r.content = r.content.replace(/<\/?[^>]+(>|$)|&nbsp;/g, "");
        });
      }




      // 发送流式请求
      const request = this.sendChatRequest(
        this.IsOpenBothwayContext ? this.AllReqMessages : thisReqmessage,
        this.Temperature,
        this.FrequencyPenalty,
        (progressEvent) => {
          // 请求进度回调函数
          const responseData = progressEvent.event.target.responseText;
          if (responseData != null && responseData !== "") {
            // 处理响应数据流
            const sigmsg = {
              msg: responseData,
              msgid:(Date.now() + Math.random()).toString(),
              ismy: false,
              isloading: false,
              isshow: true,
              imgUrl: "ai.png",
              tag: "AI助手",
              provice: "小呆", //扩展-聊天室字段
              requestId: requestId,
              uuid: thisrequuid,
              time: this.GetSendtime(),
            };
            const index = this.Msglist.findIndex(
              (r) => r.requestId == requestId
            );
            if (index !== -1) {
              this.Msglist.splice(index, 1, sigmsg);

              if (ischatroom) { //性能损耗严重 暂时关闭(2023.07.12)
                //this.SendChatAiScoket(this.Msglist[index].msg, requestId);
              }
            }
          }
        },
        async (response)  => {


          //console.log(response);
          // 请求成功回调函数
          //console.log(response);
          const responseData = response.data;

          //console.log('responseData',responseData);
          if (
            responseData ==
            `<span style="color: #FFA500;">非常抱歉，我正在处理大量询问，您的访问可能会稍有延迟，请您稍候片刻再试!!! 😭😭😭</span>`
          ) {
            this.msg = this.premsg;
            this.sendmsg();

            this.PushZanZhu(requestId);
          }
          //this.premsg
          const sigmsg = {
            msg: responseData,
            msgid:(Date.now() + Math.random()).toString(),
            ismy: false,
            isloading: false,
            requestId: requestId,
            uuid: thisrequuid,
            issucceed: true,
            imgUrl: "ai.png",
            tag: "AI助手",
            provice: "小呆", //扩展-聊天室字段
            isshow: true,
            timeDiff: false,
            time: this.GetSendtime(),
          };
          const index = this.Msglist.findIndex((r) => r.requestId == requestId);
          if (index !== -1) {
            this.Msglist.splice(index, 1, sigmsg);

            this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == thisrequuid)[0],sigmsg.time,sigmsg.msg)
            await IDBadd(sigmsg)
            
          }
          else
          {
            // 不在当前对话了 。。。  添加记录
            this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == thisrequuid)[0],sigmsg.time,sigmsg.msg)
            await IDBadd(sigmsg)
          }
          this.AutoscrollbarFlag = true;

          //this.MsgDDLlist(this.current.uuid) //刷新时间

          if (
            this.Msglist.length == 3 ||
            this.Msglist.length == 30 ||
            this.Msglist.length == 60 ||
            this.Msglist.length == 100 ||
            this.Msglist.length == 130 ||
            this.Msglist.length == 200
          ) {
            this.PushZanZhu(requestId);
          }

          if (ischatroom) {
            this.SendChatAiScoket(sigmsg.msg, requestId);
          }
        },
       async (error) => {
          this.msg = this.premsg;
          // 请求失败回调函数
          console.log(error);
          const sigmsg = {
            msg: `<div style="display: flex;color: red;font-size: 14px;align-items: center;flex-wrap: wrap;margin: 8px 0;">
			<div style="margin-right: 8px;">
				<h4 style="padding:0;margin: 0;">网络异常${error.message}可能的原因有:</h4>
				<ul style="padding: 0;list-style: none;">
					<li>1、💻你的网络问题，请检查网络</li>
					<li>2、😭站长服务器压力过大，请稍等再试 </li>
					<li>3、💬若长时间失败可联系QQ反馈:1503394447 </li>
				</ul>
			</div>
			<img style="width: 130px;height: 130px;border-radius: 6px;" src="/err.jpg" alt="">
		</div>
							`,
            ismy: false,
            isloading: false,
            requestId: requestId,
            issucceed: false,
            isshow: true,
            uuid: thisrequuid,
            imgUrl: "ai.png",
            tag: "AI",
            provice: "小呆", //扩展-聊天室字段
            time: this.GetSendtime(),
          };
          const index = this.Msglist.findIndex((r) => r.requestId == requestId);
          if (index !== -1) {
            this.Msglist.splice(index, 1, sigmsg);

            this.UserList_this_Snapshoot(this.Userlist.filter(r=>r.uuid == thisrequuid)[0],sigmsg.time,sigmsg.msg)
            await IDBadd(sigmsg)
            
          }
        }
      );

      // 终止请求
      //request.cancel();

      /* axios({
          method: 'post',
          //url: 'http://47.236.19.239:5000/api/chat/chat',
          url: 'http://localhost:5149/api/chat/chat',
          data: {
            ChatMessages: thisReqmessage,
            Temperature: this.Temperature,
            FrequencyPenalty: this.FrequencyPenalty
          },
          onDownloadProgress: (r) => {
            if (r.event.target.responseText == null || r.event.target.responseText == '') {
              return
            }
            let sigmsg = {
              msg: r.event.target.responseText,
              ismy: false,
              isloading: false,
              requestId: requestId,
              uuid: this.current.uuid,
              time: this.GetSendtime()
            }
            const index = this.Msglist.findIndex(r => r.requestId == requestId);
            if (index !== -1) {
              this.Msglist.splice(index, 1, sigmsg);
            }
          }
        })
        .then(res => {
          //console.log(this.Msglist)
          console.log("res", res)
          console.log("then-requestId", requestId)
          const index = this.Msglist.findIndex(r => r.requestId == requestId);
          if (index !== -1) {
            this.Msglist.splice(index, 1, {
              msg: res.data,
              ismy: false,
              isloading: false,
              requestId: requestId,
              uuid: this.current.uuid,
              time: this.GetSendtime()
            });
          }
        }).catch(err => {
          console.log(err)
          const index = this.Msglist.findIndex(r => r.requestId == requestId);
          if (index !== -1) {
            console.log("index", index)
            this.Msglist.splice(index, 1, {
              msg: `<span style="color: red;">网络异常${err.message}</span>`,
              ismy: false,
              isloading: false,
              requestId: requestId,
              uuid: this.current.uuid,
              time: this.GetSendtime()
            });
          }

        }) */
    },
    SendChatAiScoket(msg, requestId) {
      var sendobj = {
        msgs:
          `<span data-useruuid='${this.Loginuuid}'   data-username='${this.LoginUserName}' data-userimg='${this.LoginUserImg}' data-provice='${this.LoginUserProvice}'  class="Atmsg" style="color: #00a4ff;">@${this.LoginUserName}, </span>` +
          msg,
        msgType: 9,
        sendName: "AI助手",
        receiveName: "AI聊天室",
        imgUrl: "ai.png",
        senduuid: 2,
        receiveuuid: this.current.uuid,
        requestId: requestId,
        ismy: true,
        tag: "AI助手",
        time: "",
      };

      this.MyWebSockeSend(sendobj); //发送消息
    },
    sendChatRequest(
      reqMessage,
      temperature,
      frequencyPenalty,
      onProgress,
      onSuccess,
      onError
    ) {
      const url = 'https://gpt.xiaoshagua.top:2001/api/chat/chat';
      //const url = "http://localhost:5149/api/chat/chat";
      const requestConfig = {
        method: "post",
        url: url,
        responseType: "stream",
        headers: {
          "Content-Type": "application/json",
        },
        data: {
          ChatMessages: localStorage.getItem('Lock_Power') == null
            && reqMessage.length > this.ContextCount ? reqMessage.splice(-this.ContextCount) : reqMessage,
          Temperature: temperature,
          FrequencyPenalty: frequencyPenalty,
          UserName:this.LoginUserName
        },
        onDownloadProgress: onProgress,
      };
      const request = axios(requestConfig);
      request.then(onSuccess).catch(onError);
      return request;
    },
    GotoUser(
      item, //跳转用户页面
      obj
    ) {

      this.TabHistory = obj
      console.log('this.TabHistory', this.TabHistory);
      this.IsShowJournalBox = false;
      this.IsShowFriend = false;
      this.IsAbout = false;
      this.IsSetItemShou = false;
      this.IsShowMy = true;

      setTimeout(() => {
        this.$refs.mypage.OnLoadGetData(item);
      }, 100);
      //alert(useruuid)
    },
    MyCenter() {
      this.IsShowJournalBox = false;
      this.IsShowFriend = false;
      this.IsAbout = false;
      this.IsSetItemShou = false;
      this.IsShowMy = true;

      setTimeout(() => {
        let obj = {
          useruuid: this.Loginuuid,
          userimgurl: this.LoginUserImg,
          username: this.LoginUserName,
          provice: this.LoginUserProvice,
        };
        this.$refs.mypage.OnLoadGetData(obj);
      }, 100);
    },
    GotoUser2(element) {
      this.IsShowJournalBox = false;
      this.IsShowFriend = false;
      this.IsAbout = false;
      this.IsSetItemShou = false;
      this.IsShowMy = true;


      //历史
      this.TabHistory.IsShowJournalBox = false
      this.TabHistory.IsShowFriend = false
      this.TabHistory.IsAbout = false
      this.TabHistory.IsSetItemShou = false
      this.TabHistory.IsShowMy = false



      if (this.current.uuid != 2) {
        var regex = /src="(.*?)"/;
        var match = regex.exec(this.current.srchtml);
        var srcValue = match[1];

        //获取对方@ 信息
        this.AtUserName = this.current.currentName;
        this.AtUserProvice = '中国';
        this.AtUserImg = srcValue;
        this.AtUseruuid = this.current.uuid;
      }

      setTimeout(() => {
        let obj = {
          useruuid: this.AtUseruuid,
          userimgurl: this.AtUserImg,
          username: this.AtUserName,
          provice: this.AtUserProvice,
        };
        this.$refs.mypage.OnLoadGetData(obj);
      }, 100);

      this.IsShowAtUserDiv = false
    },
    childGoback() //返回
    {



      let tabhistory = this.TabHistory

      //console.log('tabhistory',tabhistory);


      this.IsShowJournalBox = tabhistory.IsShowJournalBox;
      this.IsShowFriend = tabhistory.IsShowFriend;
      this.IsAbout = tabhistory.IsAbout;
      this.IsSetItemShou = tabhistory.IsSetItemShou;
      this.IsShowMy = tabhistory.IsShowMy;


      if (!tabhistory.IsShowJournalBox && !tabhistory.IsShowFriend && !tabhistory.IsAbout && !tabhistory.IsSetItemShou && !tabhistory.IsShowMy) {
        this.$nextTick(() => {
          let container = document.querySelector(".msgleft3msgcontent");
          container.scrollTop = container.scrollHeight;

          //console.log('ChatContentHistory',this.$refs[this.ChatContentHistory],this.$refs[this.ChatContentHistory][0].offsetHeight);
          //console.log('this.ChatContentHistory][0].offsetTop',this.$refs[this.ChatContentHistory][0].offsetTop,this.$refs[this.ChatContentHistory][0].scrollHeight);
          let baseheight = this.$refs.msgleft3msgcontent_base.offsetHeight / 2
          setTimeout(() => {
            container.scrollTop = this.$refs[this.ChatContentHistory][0].offsetTop - baseheight;
            // container.scrollTo({
            //   top: container.scrollHeight,
            //   behavior: "smooth", // 可选，平滑滚动
            // });
          }, 40)
        })
      }


    },
    async SwitchContentBox(title) {
      switch (title) {
        case "朋友圈不刷新":
          this.IsShowJournalBox = true;
          this.IsShowFriend = false;
          this.IsAbout = false;
          this.IsSetItemShou = false;
          this.IsShowMy = false;
          break;
        case "朋友圈":
          this.IsShowJournalBox = true;
          this.IsShowFriend = false;
          this.IsAbout = false;
          this.IsSetItemShou = false;
          this.IsShowMy = false;
          await this.$refs.childJournal.GetData(null);


          //   var parent = document.querySelector(".journalbox");

          //   const scrollTop = 600//baseelement.scrollTop; //获取鼠标滚轮移动距离

          //   parent.scrollTo({
          //   top: scrollTop,
          //   behavior: "smooth", // 可选，平滑滚动
          // });

          break;
        case "好友":
          this.IsShowJournalBox = false;
          this.IsShowFriend = true;
          this.IsAbout = false;
          this.IsSetItemShou = false;
          this.IsShowMy = false;
          break;
        case "关于":
          this.IsShowJournalBox = false;
          this.IsShowFriend = false;
          this.IsAbout = true;
          this.IsSetItemShou = false;
          this.IsShowMy = false;
          break;
        case "设置":
          this.IsShowJournalBox = false;
          this.IsShowFriend = false;
          this.IsAbout = false;
          this.IsSetItemShou = true;
          this.IsShowMy = false;
          break;
        case "个人中心":
          this.IsShowJournalBox = false;
          this.IsShowFriend = false;
          this.IsAbout = false;
          this.IsSetItemShou = false;
          this.IsShowMy = true;
          break;

        default:
          break;
      }
    },
  },
};

if (!localStorage.getItem("developer")) {
  document.onkeydown = () => {
    //禁用F12
    if (window.event && window.event.keyCode == 123) {
      return false;
      //禁用ctrl+shift+i,
    } else if (
      window.event.ctrlKey &&
      window.event.shiftKey &&
      window.event.keyCode == 73
    ) {
      return false;
      //屏蔽Shift+F10
    } else if (window.event.shiftKey && window.event.keyCode == 121) {
      return false;
    }
  };
  // 禁用右键
  document.oncontextmenu = new Function("event.returnValue=false");
}

// 给父元素绑定点击事件
document.addEventListener("click", function (event) {
  // 判断是否点击了 sendmsgimg 元素
  if (event.target.classList.contains("sendmsgimg")) {
    showImagePreview(event.target.src);
  }
});

function showImagePreview(imageUrl) {
  const image = new Image();
  image.src = imageUrl;
  image.onload = () => {
    // 创建弹出层
    const previewContainer = document.createElement("div");
    previewContainer.style.position = "fixed";
    previewContainer.style.top = 0;
    previewContainer.style.bottom = 0;
    previewContainer.style.left = 0;
    previewContainer.style.right = 0;
    previewContainer.style.backgroundColor = "rgba(0,0,0,0.8)";
    previewContainer.style.display = "flex";

    previewContainer.style.zIndex = 999999999999999;
    previewContainer.style.justifyContent = "center";
    previewContainer.style.alignItems = "center";
    document.body.appendChild(previewContainer);
    // 在弹出层中添加图片
    const previewImage = document.createElement("img");
    previewImage.src = imageUrl;
    previewImage.style.maxWidth = "80%";
    previewImage.style.maxHeight = "80%";
    previewImage.style.borderRadius = "5px";
    previewContainer.appendChild(previewImage);
    // 点击弹出层，关闭预览
    previewContainer.addEventListener("click", () => {
      previewContainer.style.display = "none";
      document.body.removeChild(previewContainer);
    });
  };
}

</script>

<style>
@import "chat2.css";
/* @import url('~highlight.js/styles/github.css'); */
/* md样式 */</style>